基于 gulp 的自动化构建之“静态资源版本管理”

2016-09-07 本文已影响3144人咚门

在静态资源版本管理方面，以前用过两种方案（都是通过后端实现）：
第一种：获取文件最新修改时间。可以实现比较好的版本管理效果，但客户端每一次访问一个资源文件，服务器都会动态读取一次该文件的最新修改时间。对这种方案，头脑有限，暂时无法评估其对性能和访问速度的影响。但就版本管理效果来说，更倾向于这一种。
第二种：设置日期常量。版本管理效果非常差。

目前已实现的新方案如下：
在构建阶段计算静态资源的 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版本号