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

Question

我正在使用angular2构建一个systemJS项目。我用古普来部署。

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

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

知道我所需要的只是暂时改变一个css文件。所以我用：

• 重新命名我的文件并创建我的manifest.json
• gulp收集器，从我们使用清单调用它们的位置替换这些文件名。
• 牧师，删除旧文件。

知道我的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。但我有两个问题

1. 收集器不替换我的html文件。我不知道该怎么处理
2. rev-del，当我使用它时会出错(我暂时对它进行了评论)

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

Answer 1

1)删除部分：

您还可以使用此lib =require(‘require删除-原始’)；

并在调用.pipe(rev())后，将其称为“revDelete()”。

2)对于参考部分(更新新的散列引用)：

我使用gulp rev-替换lib

const revReplace =需要量(‘gulp rev-替换’)；并将其称为".pipe(revReplace())“，并在".pipe(revDelete())”后面加上“.pipe(revDelete())”

我看到你找到了一个解决方案，但是，仅仅是展示一个替代方案，也许它在将来是有用的。

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"))
});

我贴出了答案，以防有人挣扎。