Question

我在前端项目中使用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("."));
});

这就是我所期望的 - 它每次清除清单文件，然后重写它们。我想要做的只是在捆绑+缩小我的JS + CSS文件之后替换每个清单的内容，而不会阻止用户体验。

另外，在我的快递路线文件中，我正在发送清单，因此我可以包含脚本/样式表，如下所示：

script(src="/shop-assets/javascripts/production/#{assetPathJS}")

但是当我删除并重写清单文件时，用户会看到间歇性故障。有没有人对此事有任何提示？我见过的大多数例子只有gulpfile的一个入口点。谢谢！

Answer 1

我在路线文件中做了类似的事情：

var jsPaths = ServerConfig.assetPaths(["cleanout.js", "hiw.js", "do_good.js"], revManifestJS, "javascripts/");

其中函数assetPaths根据环境解析路径名。比我想象的简单。

Gulp指纹识别+生产部署

1 个答案: