在静态资源版本管理方面，以前用过两种方案（都是通过后端实现） ：
第一种：获取文件最新修改时间。可以实现比较好的版本管理效果，但客户端每一次访问一个资源文件，服务器都会动态读取一次该文件的最新修改时间。对这种方案，头脑有限，暂时无法评估其对性能和访问速度的影响。但就版本管理效果来说，更倾向于这一种。
第二种：设置日期常量。版本管理效果非常差。
目前已实现的新方案如下：
在构建阶段计算静态资源的 hash 值，并将该值以参数的形式追加到<link>、<script>中的 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根据该映射表 将<link>、<script>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版本号
网友评论