基于 gulp 的自動化構建之“靜態資源版本管理”

在靜態資源版本管理方面,以前用過兩種方案(都是通過后端實現) :
第一種:獲取文件最新修改時間。可以實現比較好的版本管理效果,但客戶端每一次訪問一個資源文件,服務器都會動態讀取一次該文件的最新修改時間。對這種方案,頭腦有限,暫時無法評估其對性能和訪問速度的影響。但就版本管理效果來說,更傾向于這一種。
第二種:設置日期常量。版本管理效果非常差。

目前已實現的新方案如下:
在構建階段計算靜態資源的 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"  => "http://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-revgulp-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版本號

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容