gulp：自动添加版本号以请求防止浏览器缓存 [英] gulp: Automatically add version number to request for preventing browser cache

问题描述

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

在npm版本库中，我无法找到自动添加版本号的请求的工具。我在问是否有人发明过此类工具。

可能的实现可能如下：

我在 src / 文件夹，使用以下脚本标记

 < script src =js / app。 js<！ - ％nocache％ - >>< / script> 
  

在构建过程中，它被复制到 dist / 文件夹和评论被替换为自动增量编号

 < script src =js / app.js？t = 1234> ;< /脚本> 
  

解决方案

您可以使用 gulp-version-number 。它可以通过向URL添加参数来为HTML文档中的链接脚本，样式表和其他文件添加版本号。例如：
$ b

 < link rel =stylesheethref =main.css> ; 
  

变成：

 < link rel =stylesheethref =main.css？v = 474dee2efac59e2dcac7bf6c37365ed0> 
  

您甚至不必指定占位符，就像您在示例实现中显示的那样。

示例用法：

  const $ = gulpLoadPlugins（）; 
 const'version'：{$ b $''''，'$ b'''，'$ b $''' ：['css'，'js']，
}，
}; 
 $ b gulp.task（'html'，（）=> {
 return gulp.src（'src / ** / *。html'）
 .pipe（$ .htmlmin（{collapseWhitespace：true}））
 .pipe（$。versionNumber（versionConfig））
 .pipe（gulp.dest（'docroot'））; 
}）; 
  

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;

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.

Possible implementation could be the following:

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

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

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

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

解决方案

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">

becomes:

<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.

Example usage:

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

这篇关于gulp：自动添加版本号以请求防止浏览器缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！