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>

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'));
});

Answer 2

您可以使用该gulp-rev模块。这会将版本号附加到文件中，该版本是文件内容的哈希值，因此仅在文件更改时才会更改。

然后，输出包含的文件，例如之间的映射清单文件Scripts.js，以Scripts-8wrefhn.js.

然后，在返回页面内容以映射正确的值时使用帮助函数。

我已经使用了上面的过程。但是，还有另一个模块gulp-rev-all是gulp-rev的分支扩展，它做了更多的工作，例如，自动更新页面中的文件引用。

此处的文档：

• gulp-rev：https：//github.com/sindresorhus/gulp-rev
• gulp-rev-all：https：//www.npmjs.com/package/gulp-rev-all

Answer 3

看起来你可能有很多选择。

https://www.npmjs.com/package/gulp-cachebust https://www.npmjs.com/package/gulp-buster

希望这可以帮助。