如何使用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和供应商文件构建一个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”。想为每个部署版本缓存失败。

任何答案/建议将不胜感激。非常感谢！

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