原理
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>
