Just starting out with Gulp - it's freaking great. This works but the rev.manifest over writes itself and doesn't have both the 'style' and 'scripts' in it. There must be a better way. Right? :-)
gulp.task('script', function() {
var scripts = gulp.src('source-js/main.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest());
var manifest = gulp.src('./rev-manifest.json');
return es.merge(scripts, manifest)
.pipe(rev.manifest())
.pipe(gulp.dest('.'))
});
gulp.task('style', function() {
var styles = gulp.src('source-less/style.less')
.pipe(less({compress: true}))
.pipe(rev())
.pipe(gulp.dest());
var manifest = gulp.src('./rev-manifest.json');
return es.merge(styles, manifest)
.pipe(rev.manifest())
.pipe(gulp.dest('.'))
});
gulp.task('watch', function () {
gulp.watch('source-less/**/*.less', ['style']);
gulp.watch('source-js/**.js', ['script']);
});
Edit: trying with es is still lover writing the manifest:
gulp.task('script', function() {
var scripts = gulp.src('source-js/main.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('assets/js'));
var manifest = gulp.src('./rev-manifest.json');
return es.merge(scripts, manifest)
.pipe(rev.manifest())
.pipe(gulp.dest('.'))
});
gulp.task('style', function() {
var styles = gulp.src('source-less/style.less')
.pipe(less({compress: true}))
.pipe(rev())
.pipe(gulp.dest('assets/css'));
var manifest = gulp.src('./rev-manifest.json');
return es.merge(styles, manifest)
.pipe(rev.manifest())
.pipe(gulp.dest('.'))
});
There is an example to add the manifest.json directly to the stream to prevent it to be overwritten but there is a currently a bug in gulp#396 related to vinyl-fs#25 that disallow it. For future readers when it's fixed:
gulp.task('scripts', function() {
gulp.src('source-js/main.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('assets/js'))
.pipe(gulp.src('./rev-manifest.json'))
.pipe(rev.manifest())
.pipe(gulp.dest('assets'));
});
But for now, you should use event-stream for this. Note that until gulp-rev#59 is merged, it won't work.
var es = require('event-stream');
gulp.task('scripts', function() {
var scripts = gulp.src('source-js/main.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('assets/js'));
var manifest = gulp.src('./rev-manifest.json');
return es.merge(scripts, manifest)
.pipe(rev.manifest())
.pipe(gulp.dest('.'))
});
Your style task will follow the same pattern. All of this assume that your manifest.json will be in the root directory.