如何使用Gulp实现新应用程序版本的缓存清除？

Question

我正在使用Gulp构建可部署的应用程序。我希望对所有的.js和.css文件进行缓存破坏，这样当新版本发布时，用户需要获取新的“缓存破坏”文件。例如，如果一个app.js文件存储在浏览器的缓存中，我希望在我的index.html中引用app.js的方式如下：

<script src="app/js/app.js?v=1.2"></script>

对于所有需要进行缓存破坏的相关文件，我希望你能进行翻译。

我还有一些与此问题相关的其他问题：

1）如何确定这些文件实际上已经被正确地进行了缓存破坏？

2）是否有更好的方法来解决这个问题？

以下是我目前尝试的方法：

//compile index.html, app, vendor
gulp.task('compile-dist', function(){

    var revAll = new RevAll();

    gulp.src('../../backend-angular-seed/app/**')
    .pipe(gulp.dest('../dist/app'));


    gulp.src('../../backend-angular-seed/vendor/**')
    .pipe(gulp.dest('../dist/vendor'));

    gulp.src('../index.html')
    .pipe(gulp.dest('../dist/'));

})

这段代码将我app/目录下的所有代码（这是从我的master/目录编译出来的代码）都提取出来，并构建了一个包含了所有js、css和vendor文件的dist/目录。

在此构建后，我的dist/目录看起来像这样：

/dist
 /css
  |_app.css
 /img
 /js
  |_ app.js
  |_ base.js 
 /vendor

 index.html

我尝试了几种不同的方法来修改 dist 文件夹，以有效地实现缓存失效。我尝试使用 gulp-cachebust 和 gulp-rev-all，但我认为这两个工具有些过于复杂，不适合我想要做的事情。

理想情况下，通过 Gulp，我希望能够进入从 Gulp 构建生成的 index.html 文件，并修改所有脚本标签，以在每次部署构建时添加查询字符串 "?v=1.0" 的结尾，来使所有需要缓存失效的文件都能得到更新。

非常感谢您提供任何答案或建议！

- Mark

Answer 1

如果您只需要添加查询字符串，则建议使用gulp-cache-bust。

var cachebust = require('gulp-cache-bust');

gulp.src('./dist/index.html')
  .pipe(cachebust({
    type: 'timestamp'
  }))
.pipe(gulp.dest('./dist'));

这是关于它的教程：https://www.npmjs.com/package/gulp-cache-bust。

- user5265656