我通过在服务器上使用 gulp 构建源文件来部署我的项目。为防止缓存问题,最佳做法是在请求 url 中添加唯一编号,请参阅:Preventing browser caching on web application upgrades ;
在 npm 存储库中,我找不到自动向请求添加版本号的工具。我在问是否有人以前发明过这样的工具。
可能的实现如下:
我在 src/
文件夹中有一个文件 index.html,带有以下脚本标签
<script src="js/app.js<!-- %nocache% -->"></script>
在构建过程中,它被复制到 dist/
文件夹,并且注释被替换为自增号
<script src="js/app.js?t=1234"></script>
最佳答案
您可以使用 gulp-version-number
为了这。它可以通过将参数附加到 URL 来将版本号添加到 HTML 文档中的链接脚本、样式表和其他文件。例如:
<link rel="stylesheet" href="main.css">
变成:
<link rel="stylesheet" href="main.css?v=474dee2efac59e2dcac7bf6c37365ed0">
您甚至不必指定占位符,就像您在示例实现中展示的那样。而且是可配置的。
示例用法:
const $ = gulpLoadPlugins();
const versionConfig = {
'value': '%MDS%',
'append': {
'key': 'v',
'to': ['css', 'js'],
},
};
gulp.task('html', () => {
return gulp.src('src/**/*.html')
.pipe($.htmlmin({collapseWhitespace: true}))
.pipe($.versionNumber(versionConfig))
.pipe(gulp.dest('docroot'));
});
注意:
我不能再推荐这个插件了。它不再维护,并且存在一些问题。我前段时间创建了一个拉取请求,但作者没有回复。
关于javascript - gulp:自动为请求添加版本号以防止浏览器缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28573508/