Gulp 指纹识别 + 生产部署
Gulp Fingerprinting + Production Deploys
我正在使用 gulp 执行前端项目的常见任务。我的目标是对我的 JS+CSS 资产进行指纹识别并在部署时更新我的 rev-manifest
而不会中断任何事情。我的任务看起来像这样:
gulp.task("clean-js", function() {
return del(["./public/shop-assets/javascripts/production/*.js", "./rev-manifest.json"], function(){
console.log("Production JS folder and rev-manifest JSON cleared");
});
});
gulp.task("clean-css", function() {
return del(["./public/shop-assets/stylesheets/production/*.css", "./rev-manifest-css.json"], function(){
console.log("Production CSS folder and rev-manifest-css JSON cleared");
});
});
gulp.task('js:prod',['clean-js'], function() {
return gulp.src("./public/shop-assets/javascripts/*.js/")
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest("./public/shop-assets/javascripts/production/"))
.pipe(rev.manifest())
.pipe(gulp.dest("."));
});
gulp.task('css:minify',["clean-css"], function() {
return gulp.src("./public/shop-assets/stylesheets/*.css")
.pipe(minifyCss())
.pipe(rev())
.pipe(gulp.dest("./public/shop-assets/stylesheets/production/"))
.pipe(rev.manifest())
.pipe(rename("rev-manifest-css.json"))
.pipe(gulp.dest("."));
});
这符合我的预期——它每次都会清除清单文件,然后重写它们。我想做的只是替换每个清单的内容 after 我捆绑 + 缩小我的 JS +CSS 文件而不影响用户体验。
此外,在我的快速路由文件中,我正在向下发送清单,这样我就可以像这样包含 scripts/stylesheets:
script(src="/shop-assets/javascripts/production/#{assetPathJS}")
但是当我删除并重写清单文件时,用户会看到间歇性故障。
有人对此事有任何提示吗?我见过的大多数示例都只有一个 gulp 文件的入口点。谢谢!
我最后在我的路线文件中做了这样的事情:
var jsPaths = ServerConfig.assetPaths(["cleanout.js", "hiw.js", "do_good.js"], revManifestJS, "javascripts/");
assetPaths 函数根据环境解析路径名。比我想象的简单。
我正在使用 gulp 执行前端项目的常见任务。我的目标是对我的 JS+CSS 资产进行指纹识别并在部署时更新我的 rev-manifest
而不会中断任何事情。我的任务看起来像这样:
gulp.task("clean-js", function() {
return del(["./public/shop-assets/javascripts/production/*.js", "./rev-manifest.json"], function(){
console.log("Production JS folder and rev-manifest JSON cleared");
});
});
gulp.task("clean-css", function() {
return del(["./public/shop-assets/stylesheets/production/*.css", "./rev-manifest-css.json"], function(){
console.log("Production CSS folder and rev-manifest-css JSON cleared");
});
});
gulp.task('js:prod',['clean-js'], function() {
return gulp.src("./public/shop-assets/javascripts/*.js/")
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest("./public/shop-assets/javascripts/production/"))
.pipe(rev.manifest())
.pipe(gulp.dest("."));
});
gulp.task('css:minify',["clean-css"], function() {
return gulp.src("./public/shop-assets/stylesheets/*.css")
.pipe(minifyCss())
.pipe(rev())
.pipe(gulp.dest("./public/shop-assets/stylesheets/production/"))
.pipe(rev.manifest())
.pipe(rename("rev-manifest-css.json"))
.pipe(gulp.dest("."));
});
这符合我的预期——它每次都会清除清单文件,然后重写它们。我想做的只是替换每个清单的内容 after 我捆绑 + 缩小我的 JS +CSS 文件而不影响用户体验。
此外,在我的快速路由文件中,我正在向下发送清单,这样我就可以像这样包含 scripts/stylesheets:
script(src="/shop-assets/javascripts/production/#{assetPathJS}")
但是当我删除并重写清单文件时,用户会看到间歇性故障。 有人对此事有任何提示吗?我见过的大多数示例都只有一个 gulp 文件的入口点。谢谢!
我最后在我的路线文件中做了这样的事情:
var jsPaths = ServerConfig.assetPaths(["cleanout.js", "hiw.js", "do_good.js"], revManifestJS, "javascripts/");
assetPaths 函数根据环境解析路径名。比我想象的简单。