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

Question

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

我想避免让我的用户单击( Cntl + R )来删除缓存的 css 文件。

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

知道我现在需要的只是更改一个 css 文件。所以我正在使用:

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

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

    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) 对于删除部分:

您也可以使用这个库 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())”

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