在静态资源版本管理方面,以前用过两种方案(都是通过后端实现) :
第一种:获取文件最新修改时间。可以实现比较好的版本管理效果,但客户端每一次访问一个资源文件,服务器都会动态读取一次该文件的最新修改时间。对这种方案,头脑有限,暂时无法评估其对性能和访问速度的影响。但就版本管理效果来说,更倾向于这一种。
第二种:设置日期常量。版本管理效果非常差。
目前已实现的新方案如下:
在构建阶段计算静态资源的 hash 值,并将该值以参数的形式追加到、
中的 URL。
大家需要知道的是,如果某个文件发生了修改,我这里会自动修改引用了该文件的各个模块的view文件。
此方案可实现真正的版本管理效果,并且可以确定对性能和访问速度无影响。
1. 默认方案:
如果使用gulp-rev
+ gulp-rev-collector
,默认效果如下:
"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"
"cdn/image.gif" => "//cdn8.example.dot/img/image-35c3af8134.gif"
但是如果用上面方法,实现的是非覆盖式更新:即每次修改文件之后,生成带新版本号的文件,但是带旧版本号的文件不会被删除,长此以往,最后你会发现文件夹里累积了大量带旧版本号的无用文件。例如,style.css文件经过三次更新之后,会累积一下三个文件:
style-a3654c03aa.css
style-98c5f098bd.css
style-6e4cfcf9de.css
2. 改良方案:
期望效果:
href="dist/css/style.css" => href="dist/css/style.css?v=1d87bebe"
src="dist/js/all.min.js" => src="dist/js/all.min.js?v=98c5f098bd"
src="dist/img/image.gif" => src="dist/img/image.gif?v=35c3af8134"
原理:
(1)gulp-rev
根据文件内容计算生成一个 hash 字符串,如:98c5f098bd
(2)gulp-rev
生成一个映射表,列出映射关系
{
"all.min.js": "all.min.js?v=98c5f098bd"
}
(3)gulp-rev-collector
根据该映射表 将、
URL中的文件名
all.min.js
替换为all.min.js?v=98c5f098bd
如何修改?
需要对gulp-rev
和gulp-rev-collector
进行修改。修改如下:
修改映射表中 属性值的格式:
打开node_modules\gulp-rev\index.js
第133行 manifest[originalFile] = revisionedFile;
修改为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
修改生成文件的文件名(原来是将 hash 值加入到文件名中,现要文件名保持不变):
打开node_modules\rev-path\index.js
第10行 return filename + '-' + hash + ext;
修改为: return filename + ext;
打开node_modules\gulp-rev-collector\index.js
第31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
修改为: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
避免引用 URL 中的版本号累积:dist/js/all.min.js?v=6e4cfcf9de
=> dist/js/all.min.js?v=54a62a8eb6?v=6e4cfcf9de
打开node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
修改为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
3. gulpfile.js 部分配置
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
gulp.task('css-rev', ['cleanCss'], function() {
console.log('开始--计算 css 资源版本号,并生成映射表...');
return gulp.src(['src/css/tmp/*.css'])
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest({
path: 'rev-manifest-css.json'
}))
.pipe(gulp.dest('src/rev'));
});
gulp.task('css', ['css-rev'], function() {
console.log('开始--修改 css 引用链接的资源版本号...');
return gulp.src(['src/rev/rev-manifest-css.json', 'views/**/*.php'])
.pipe(revCollector())
.pipe(gulp.dest('views'));
});
gulp.task('js-rev', ['js-move'], function() {
console.log('开始--计算 js 资源版本号,并生成映射表...');
return gulp.src(['dist/js/**/*.js'])
.pipe(rev())
// .pipe(gulp.dest('dist/js'))
.pipe(rev.manifest({
path: 'rev-manifest-js.json'
}))
.pipe(gulp.dest('src/rev'));
});
gulp.task('js', ['js-rev'], function() {
console.log('开始--修改 js 引用链接的资源版本号...');
return gulp.src(['src/rev/rev-manifest-js.json', 'views/**/*.php'])
.pipe(revCollector())
.pipe(gulp.dest('views'));
});
参考:
Gulp自动添加版本号
前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号