原理

1、修改js和css文件
2、通過對js,css文件內容進行hash運算，生成一個文件的唯一hash字符串(如果文件修改則hash號會發生變化)
3、替換html中的js,css文件名，生成一個帶版本號的文件名

• 原html文件代碼

<link rel="stylesheet" href="css/common.css"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js"></script>
<img src="images/simper_logo.png" width="298" height="53" class="logo"/>

• 預期效果：在原目錄結構下html文件代碼

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=3576a6e73c"></script>
<img src="images/simper_logo.png?v=ed4b91c157" width="298" height="53" class="logo"/>

先說說gulp的使用步驟

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務
詳細步驟見鏈接 http://www.ydcss.com/archives/18

• 下面回到正題，如果給靜態資源文件自動添加版本號

1：安裝gulp和gulp插件

 打開命令指示符（cmd）執行
 ```

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、img文件路徑，是本地css,js,img文件的路徑，可自行配置
var cssUrl = 'css/*.css',   
    jsUrl = 'js/*.js';    
    imageUrl = 'images/*';

//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'));
});

//img生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revImg', function(){    
    return gulp.src(imageUrl)        
        .pipe(rev())        
        .pipe(rev.manifest())        
        .pipe(gulp.dest('rev/images'));
});

//Html更換css、js、img文件版本
gulp.task('revHtml', function () {   
    return gulp.src(['rev/**/*.json', './*.html'])  /*./是本地html文件的路徑，可自行配置*/       
        .pipe(revCollector())        
        .pipe(gulp.dest('.'));  /*Html更換css、js文件版本,.也是和本地html文件的路徑一致*/});

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

gulp.task('default', ['dev']);

執行gulp命令后的效果

//rev目錄下生成了manifest.json對應文件
{ "common.css": "common-803a7fe4ae.css"}
<link rel="stylesheet" href="css/common-803a7fe4ae.css"/>
<img src="images/simper_logo-803a7fe4ae.png" width="298" height="53" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid-803a7fe4ae.js"></script>

很顯然這不是我們需要的效果

3.更改gulp-rev和gulp-rev-collector

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

打開node_modules\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) ) {

再執行gulp命令，得到的結果如下(效果正確):

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8"/>
<img src="images/simper_logo.png?v=ed4b91c157" width="298" height="53" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=cbb4fc4f8a"></script>

但是假如我們更改了css和js后，再執行gulp命令，得到的結果會如下:

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8?v=803a7fe4ae"/>
<img src="images/simper_logo.png?v=ed4b91c157?v=3a0d844594" width="298" height="53" alt="牛客" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=cbb4fc4f8a?v=33379df310"></script>

有沒有發現，會在版本號后面再添加一個版本號，因為gulp只替換了原來文件名，這樣又不符合預期效果了，所以我們想到，還需要修改插件的替換正則表達式。

4.繼續更改gulp-rev-collector

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

現在你不管執行多少遍gulp命令，得到的html效果都是

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8"/>
<img src="images/simper_logo.png?v=ed4b91c157" width="298" height="53" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=cbb4fc4f8a"></script>

完美解決！！！！