gulp教程之自動添加版本號

1 創建項目

安裝nodejs/全局安裝gulp/本地安裝gulp/創建package.json和gulpfile.js文件，項目目錄如下：

2 自動更改版本號插件簡介

gulp-rev 為css文件中引入的圖片或字體等添加hash編碼

gulp-asset-rev為js/css文件生成hash編碼並生成 rev-manifest.json文件名對照映射

gulp-rev-collector 為文件替換版本號

3 本地安裝插件

安裝gulp-rev

npm install gulp-rev --save-dev 

安裝gulp-asset-rev

npm install gulp-asset-rev --save-dev  

安裝gulp-rev-collector

npm install gulp-rev-collector --save-dev  

4 配置gulpfile.js

5 執行任務

命令提示符執行：

gulp

執行后壓縮后的文件目錄如下：

css文件如下

html文件如下

然而，我們的預期效果是希望這樣子的

6、更改gulp-rev和gulp-rev-collector

打開node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打開nodemodules\gulp-rev\node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新為: return filename + ext;

打開node_modules\gulp-rev-collector\index.js
31行 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) )

打開node_modules\gulp-assets-rev\index.js
78行 var verStr = (options.verConnecter || "-") + md5;
更新為：var verStr = (options.verConnecter || "") + md5;
80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
更新為：src=src+"?v="+verStr;

打開node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),

修改完成執行gulp，效果如下

7 總結

本文簡單的介紹如何壓縮靜態資源及使用到的對於插件，下一篇介紹使用gulp如何讓文件合並。