Combining Gulp tasks into one gulp-rev manifest
Just starting with Gulp is awesome. This works, but rev.manifest over is self-written and lacks both "style" and "scripts". 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 still lover writes 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('.'))
});
+3
source to share
2 answers
There is an example to add manifest.json
directly to the stream to prevent it from being overwritten, but there is currently a bug in gulp # 396 related to vinyl-fs # 25 that disallows it. For future readers, when it is corrected:
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 this you should use event-stream . Please note that before gulp-rev # 59 will not 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 task style
will follow one pattern. All of this assumes yours manifest.json
will be in the root directory.
+3
source to share
Here is my solution.
Folder structure
└── src
├── images
│ ├── skywalker.jpeg
│ └── space.png
├── js
│ ├── index.js
│ ├── index2.js
│ └── page.js
├── styles
│ ├── index.css
│ ├── index.styl
│ ├── module
│ │ ├── com.css
│ │ └── com.styl
│ └── page.css
└── view
├── index.html
└── page.html
My gulp task
/**
* production
*/
var jsProductionPipe = lazypipe()
.pipe(jshit)
.pipe(jshit.reporter, 'default')
.pipe(uglify, {
compress: {
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true
}
}),
cssProductionPipe = lazypipe()
.pipe(stylus).pipe(minifyCss);
gulp.task("deploy_js_css", ["deploy_image"], function () {
var manifest = gulp.src(path.join(__dirname, "dist/rev-manifest.json"));
return gulp.src(["src/**/*.styl", "src/**/*.js"])
.pipe(debug({title: '[deploy_js_css]:'}))
.pipe(revReplace({manifest: manifest, replaceInExtensions: ['.js', '.css', '.html', '.hbs', '.styl']}))
.pipe(gulpif('*.styl', cssProductionPipe()))
.pipe(gulpif('*.js', jsProductionPipe()))
.pipe(rev())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest("dist/rev-manifest.json", {
merge: true
}))
.pipe(revDel({ dest: 'dist', oldManifest: path.join(__dirname, "dist/rev-manifest.json") }))
.pipe(gulp.dest("./"));
});
gulp.task("deploy_image", function() {
return gulp.src("src/images/*", {
base: "src/"
})
.pipe(debug({title: '[deploy_image]:'}))
.pipe(imagemin({
progressive: true
}))
.pipe(rev())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest("dist/rev-manifest.json", {
merge: true
}))
.pipe(revDel({ dest: 'dist', oldManifest: path.join(__dirname, "dist/rev-manifest.json") }))
.pipe(gulp.dest("./"));
});
gulp.task('production', ['deploy_image', 'deploy_js_css']);
0
source to share