原理
1乱陡、修改js和css文件
2浇揩、通過對js,css文件內(nèi)容進行hash運算，生成一個文件的唯一hash字符串(如果文件修改則hash號會發(fā)生變化)
3憨颠、替換html中的js,css文件名胳徽，生成一個帶版本號的文件名
- 原h(huán)tml文件代碼
<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"/>
- 預期效果：在原目錄結(jié)構(gòu)下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 -> 運行任務(wù)
詳細步驟見鏈接 http://www.ydcss.com/archives/18
- 下面回到正題，如果給靜態(tài)資源文件自動添加版本號
1：安裝gulp和gulp插件
打開命令指示符（cmd）執(zhí)行
```
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文件的路徑一致*/});
//開發(fā)構(gòu)建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revImg'],
['revHtml'],
done);
});
gulp.task('default', ['dev']);
執(zhí)行g(shù)ulp命令后的效果
//rev目錄下生成了manifest.json對應(yīng)文件
{ "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) ) {
再執(zhí)行g(shù)ulp命令蝶缀，得到的結(jié)果如下(效果正確):
<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后，再執(zhí)行g(shù)ulp命令薄货，得到的結(jié)果會如下:
<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>
有沒有發(fā)現(xiàn)，會在版本號后面再添加一個版本號谅猾，因為gulp只替換了原來文件名柄慰，這樣又不符合預期效果了，所以我們想到税娜，還需要修改插件的替換正則表達式坐搔。
4.繼續(xù)更改gulp-rev-collector
打開node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
現(xiàn)在你不管執(zhí)行多少遍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>
