gulp自動化添加版本號

前端自動化打包發佈已經是一種常態，尤爲在移動端，測試過程當中靜態資源的緩存是件很頭疼的事情，有時候明明處理的bug測試仍是存在，其實就是緩存惹的禍，手機不比pc瀏覽器，清理緩存仍是有點麻煩的。因此自動化實現靜態資源的版本更新纔是正道。

 

先發布一下測試的項目結構

 

 

一.

1. 修改js和css文件

2. 經過對js,css文件內容進行hash運算，生成一個文件的惟一hash字符串(若是文件修改則hash號會發生變化)

3. 替換原html中的js,css文件名，生成一個帶版本號的文件名

原結構下html文件代碼：
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>

要達到的效果：在原結構下html文件代碼

<link rel="stylesheet" href="css/style.css?v=0d83247610">
<script src="js/index.js?v=61c1ef9f34"></script></br>

二.

1.做爲項目的開發依賴（devDependencies）安裝gulp和gulp插件：

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

2.編寫gulpfile.js

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');

//定義css、js文件路徑，是本地css,js文件的路徑，可自行配置
var cssUrl = 'css/*.css',
    jsUrl = 'js/*.js';

//CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
    return gulp.src(cssUrl)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});

//js生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revJs', function(){
    return gulp.src(jsUrl)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});

//Html更換css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', '*.html'])  
        .pipe(revCollector())
        .pipe(gulp.dest(''));//輸出路徑爲原html文件的地方
});

//開發構建
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);});
gulp.task('default', ['dev']);

三.更改gulp-rev和gulp-rev-collector(重要)

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

  2.打開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) ) {</br>

四.執行gulp命令，獲得的結果以下

<link rel="stylesheet" href="css/style.css?v=0d83247610">
 <script src="js/index.js?v=61c1ef9f34"></script>

五.更改gulp-rev和gulp-rev-collector的原理

當你完成第二步gulpfile.js的編寫，而後執行gulp後，你會發現效果以下:
 //rev目錄下生成了manifest.json對應文件
   { "style.css": "style-0d83247610.css"}
    <link rel="stylesheet" href="css/style-0d83247610.css">
    <script src="js/index-61c1ef9f34.js"></script>
這明顯沒有達到咱們想要的效果，因此要按照第三步的要求更改代碼！

下面的代碼是正確改完以後的效果
<script src="js/index.js?v=bf19dfd105"></script>

 

注意：當上面全部內容都設置完畢之後，注意每次更改完代碼都gulp一下。

 

下圖是運行完以後的效果