我正在使用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" 的结尾,来使所有需要缓存失效的文件都能得到更新。
非常感谢您提供任何答案或建议!