Javascript gulp：自动将版本号添加到请求以防止浏览器缓存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28573508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
gulp: Automatically add version number to request for preventing browser cache
提问by Dan
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;
我通过在服务器上使用 gulp 构建源文件来部署我的项目。为防止出现缓存问题，最佳实践可能是为请求 url 添加一个唯一编号，请参阅：防止 Web 应用程序升级时的浏览器缓存；
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.
在 npm 存储库中，我找不到自动添加版本号到请求的工具。我在问是否有人以前发明过这样的工具。
Possible implementation could be the following:
可能的实现如下：
I have a file index.html in src/folder, with following script tag
我在src/文件夹中有一个文件 index.html ，带有以下脚本标记
<script src="js/app.js<!-- %nocache% -->"></script>
During build it is copied to dist/folder, and comment is replaced by autoincrement number
在构建过程中它被复制到dist/文件夹，并且注释被自动增量编号替换
<script src="js/app.js?t=1234"></script>
回答by Serrano
You can use gulp-version-numberfor 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:
您可以gulp-version-number为此使用。通过向 URL 附加参数，它可以向链接的脚本、样式表和 HTML 文档中的其他文件添加版本号。例如：
<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'));
});
回答by Hyman
You can use the gulp-revmodule. This will append a version number to the files, the version is a hash of the file content, so it will only change if the file changes.
您可以使用该gulp-rev模块。这会将版本号附加到文件中，版本是文件内容的哈希值，因此只有在文件更改时才会更改。
You then output a manifest file containing the mapping between the file e.g. Scripts.jsto Scripts-8wrefhn.js.
然后输出一个清单文件，其中包含文件之间的映射，例如Scripts.js到Scripts-8wrefhn.js.
Then use a helper function when returning the page content to map the correct values.
然后在返回页面内容时使用辅助函数来映射正确的值。
I have used the above process. However there's another module gulp-rev-allwhich is an forked extension of gulp-rev which does a little more, e.g. automatic updating of file references in pages.
我已经使用了上述过程。然而，还有另一个模块gulp-rev-all是 gulp-rev 的分叉扩展，它做的更多一些，例如自动更新页面中的文件引用。
Documentation here:
文档在这里：
- gulp-rev: https://github.com/sindresorhus/gulp-rev
- gulp-rev-all: https://www.npmjs.com/package/gulp-rev-all
- gulp-rev: https://github.com/sindresorhus/gulp-rev
- gulp-rev-all: https://www.npmjs.com/package/gulp-rev-all
回答by Chris W. Burke
It looks like you may have quite a few options.
看起来您可能有很多选择。
https://www.npmjs.com/package/gulp-cachebusthttps://www.npmjs.com/package/gulp-buster
https://www.npmjs.com/package/gulp-cachebust https://www.npmjs.com/package/gulp-buster
Hope this helps.
希望这可以帮助。
回答by Satys
I worked onto writing an regex, which in use along with [gulp-replace][1]works just fine.
我致力于编写一个正则表达式，它在使用中[gulp-replace][1]很好用。
Please find the code below. Following is a quick code for the image and css for views files codeigniter framework. But it should work fine for all the kinds of files given the source folder specified correctly.
请在下面找到代码。以下是视图文件 codeigniter 框架的图像和 css 的快速代码。但是如果正确指定了源文件夹，它应该适用于所有类型的文件。
You may customize the code as per your use.
您可以根据自己的用途自定义代码。
You can call the tasks altogether, using gulp default or individual task at a time.
您可以一次使用 gulp 默认或单个任务来完全调用任务。
'use strict';
var gulp = require('gulp');
var replace = require('gulp-replace');
function makeid() {
return (Math.random() + 1).toString(36).substring(7);
}
gulp.task('versioningCss', () => {
return gulp.src('application/modules/**/views/*.php')
.pipe(replace(/(.*)\.css\?(_v=.+&)*(.*)/g, '.css?_v='+makeid()+'&'))
.pipe(replace(/(.*)\.css\"(.*)/g, '.css?_v='+makeid()+'"'))
.pipe(replace(/(.*)\.css\'(.*)/g, '.css?_v='+makeid()+'\''))
.pipe(gulp.dest('application/modules'));
});
gulp.task('versioningJs', () => {
return gulp.src('application/modules/**/views/*.php')
.pipe(replace(/(.*)\.js\?(_v=.+&)*(.*)/g, '.js?_v='+makeid()+'&'))
.pipe(replace(/(.*)\.js\"(.*)/g, '.js?_v='+makeid()+'"'))
.pipe(replace(/(.*)\.js\'(.*)/g, '.js?_v='+makeid()+'\''))
.pipe(gulp.dest('application/modules'));
});
gulp.task('versioningImage', () => {
return gulp.src('application/modules/**/views/*.php')
.pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\?(_v=.+&)*(.*)/g, '.?_v='+makeid()+'&'))
.pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\"(.*)/g, '.?_v='+makeid()+'"'))
.pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\'(.*)/g, '.?_v='+makeid()+'\''));
});
gulp.task('default', [ 'versioningCss', 'versioningJs', 'versioningImage']);
回答by Pritam Jyoti Ray
You can use
您可以使用
<script type="text/javascript" src="js/app.js?seq=<%=DateTime.Now.Ticks%>"></script>
<script type="text/javascript" src="js/app.js?seq=<%=DateTime.Now.Ticks%>"></script>
or
或者
<script type="text/javascript" src="js/app.js?seq=<%=DateTime.Now.ToString("yyyyMMddHHmm") %>"></script>
<script type="text/javascript" src="js/app.js?seq=<%=DateTime.Now.ToString("yyyyMMddHHmm") %>"></script>
