Question

我正在使用systemJS构建一个angular2项目。我使用Gulp进行部署。

我想避免让我的用户点击（Cntl + R）来摆脱缓存的css文件。

为此，我想使用Gulp进行文件修订。

知道我需要的只是暂时更改css文件。所以我正在使用：

gulp-rev ，重命名我的文件并创建manifest.json
gulp-rev-collector ，用我们的清单替换这些文件名称
rev-del ，删除旧文件。

知道我的css文件位于名为public的文件夹下。我的index.html也在公开/。

    gulp.task("revision:rename", function () {
     return gulp.src(["public/*.css"])
     .pipe(rev())
     // .pipe(revDel())
     .pipe(gulp.dest('public'))
     .pipe(rev.manifest())
     .pipe(gulp.dest("public"))
    });

   gulp.task("revision:updateReferences", ["revision:rename"], function () {
      gulp.src(["public/rev-manifest.json","public/*.css"])
      .pipe(collect({
          replaceReved: true,
          dirReplacements: {
              'css': 'public'
          }
      }))
      .pipe(gulp.dest("public"))
   });

调用这些函数，我得到了正确的css文件重命名，以及正确的manifest.json。但是我遇到了两个问题，

收藏家不会替换我的html文件。我不知道如何处理
当我使用它时，rev-del会出错（我暂时评论过它）

任何帮助将不胜感激！谢谢

Answer 1

1）对于删除部分：

您也可以使用此库 const revDelete = require（'gulp-rev-delete-original'）;

，并在调用.pipe（rev（））后像“ .pipe（revDelete（））”那样调用它

2）对于参考部分（更新新的哈希参考）：

我使用gulp-rev-replace lib

const revReplace = require（'gulp-rev-replace'）; 并在“ .pipe（revDelete（））”之后将其命名为“ .pipe（revReplace（））”

我看到您找到了一个解决方案，但是，仅显示一个替代方案，也许将来会有用。

Answer 2

看来我没有正确使用收集器：

现在可以使用：

gulp.task("revision:updateCSS", ["revision:rename"], function () {
   gulp.src(["public/rev-manifest.json","public/index.html"])
   .pipe(collect({
       replaceReved: false
   }))
   .pipe(gulp.dest("public"))
});

我发布了答案以防有人挣扎。

如何使用Gulp-Rev和Gulp-Rev-Collector正确解决浏览器缓存，以便更新我的index.html文件

2 个答案: