gulp: 自动添加版本号请求以防止浏览器缓存

Question

我通过在服务器上使用 gulp 构建源文件来部署我的项目。为防止缓存问题，最佳做法是为请求 url 添加一个唯一编号，请参阅： 防止浏览器缓存 Web 应用程序升级；

在 npm 存储库中，我找不到自动添加版本号到请求的工具。我在问以前是否有人发明过这种工具。

可能的实现可能如下：

我在 src/ 文件夹中有一个文件 index.html，带有以下脚本标签

 <script src="js/app.js<!-- %nocache% -->"></script>

在构建过程中，它被复制到 dist/ 文件夹，并且注释被自动增量编号替换

 <script src="js/app.js?t=1234"></script>

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以为此使用 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'));
});

笔记：

我不能再推荐这个插件了。它不再维护，并且存在一些问题。我前段时间创建了一个pull request，但是没有作者的回复。

原文由 Serrano 发布，翻译遵循 CC BY-SA 4.0 许可协议