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

2022-01-12 00:00:00 node.js javascript npm gulp

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

I deploy my project by building source files with gulp right on the server. To prevent caching issues, the best practice could be adding a unique number to request url, see: Preventing browser caching on web application upgrades;

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

In npm repositories, I couldn't find a tool for automatically adding version number to request. I'm asking if someone has invented such tool before.

可能的实现如下:

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

I have a file index.html in src/ folder, with following script tag

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

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

During build it is copied to dist/ folder, and comment is replaced by autoincrement number

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

推荐答案

你可以使用 gulp-version-number 为此.它可以通过将参数附加到 URL 来将版本号添加到 HTML 文档中的链接脚本、样式表和其他文件.例如:

You can use gulp-version-number for this. It can add version numbers to linked scripts, stylesheets, and other files in you HTML documents, by appending an argument to the URLs. For example:

<link rel="stylesheet" href="main.css">

变成:

<link rel="stylesheet" href="main.css?v=474dee2efac59e2dcac7bf6c37365ed0">

您甚至不必指定占位符，就像您在示例实现中展示的那样.而且是可配置的.

You don't even have to specify a placeholder, like you showed in your example implementation. And it's configurable.

示例用法:

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

相关文章