废话：好多后期要给工程增加版本号，清理浏览器缓存，所以使用这个鬼来搞一把
当然这里需要你用nodeJS的npm工具安装一些东西
不会nodejs,你先百度一把！
准备工作：你需要用npm包安装这些插件。
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence当然我第一次安装失败了，启动不了gulp;
于是，我用了全局安装gulp 命令为：
npm -g install gulp我用的win7，所以在CMD中运行一把就发现安装成功了
好了，开始为我们工程增加版本号
第一步：打开node_modules\gulp-rev\index.js
找到下面的代码，将注释掉的改为下面的内容，此处为改变返回的版本号格式
/*manifest[originalFile] = revisionedFile;*/
manifest[originalFile] = originalFile + '?v=' + file.revHash;第二步：打开node_modules\rev-path\index.js
找到下面的代码，将注释掉的改为下面的内容，此处为改变关联的下划线（老姿找了半天找不到这个rev-path，是因为以前的gulp-rev插件将这部分集成在了里面，而后续的版本将rev-path从gulp-rev里抽离出来了，所以要在项目目录的node_modules里找这个插件，我们不需要手动安装，这是gulp-rev的依赖，npm会自动安装！）
/*return filename + '-' + hash + ext;*/
return filename + ext;第三步：打开node_modules\gulp-rev-collector\index.js
找到下面的代码，将注释掉的改为下面的内容，此文件最好改三个地方
一处：
/*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
isRev = 0;
}*/
if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
isRev = 0;
}二处：
//return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
//禁止重复添加版本号
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;三处：
/*patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) )
);*/
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
);以上都做过多了，就可以创建一个文件，当然这个目录最好创建在工程名下第一级目录
例如我的目录为：
第四步：创建一个gulpfile.js文件所在目录如下。
内容为：
//引入gulp和gulp插件
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径并且可以传入多个不同的文件夹
var cssSrc = 'css/*.css',
jsSrc = 'js/lib/config.js',
jsGA = 'js/lib/GA.js',
baseTrend = 'js/lib/pk10BaseTrend.js',
jsSrcc = 'js/loacal/**/*.js',
ico = 'img/icon/*.ico';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src([jsSrcc,jsSrc,jsGA,baseTrend])
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revIco', function(){
return gulp.src(ico)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/ico'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['index.html','*/**/*.*'])//将所有文件打包到新文件下
.pipe(revCollector())
.pipe(gulp.dest('KJW_HTML'));
});
//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
return gulp.src(cssSrc) //该任务针对的文件
.pipe(assetRev()) //该任务调用的模块
.pipe(gulp.dest('KJW_HTML/css')); //编译后的路径
});
//以下是拷贝静态图片和声音
gulp.task('copyimg', function() {
return gulp.src(['img/**/*'])
.pipe(gulp.dest('KJW_HTML/img'))
});
gulp.task('copyLibimg', function() {
return gulp.src(['js/lib/finishAnimation/*/*.*'])
.pipe(gulp.dest('KJW_HTML/js/lib/finishAnimation'))
});
gulp.task('copyMedia', function() {
return gulp.src(['media/*'])
.pipe(gulp.dest('KJW_HTML/media'))
});
//开发构建
gulp.task('default', function (done) {
condition = false;
runSequence( //说明，用gulp.run也可以实现以上所有任务，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
['revCss'],
['revJs'],
['revIco'],
['revHtml'],
['assetRev'],
['copyimg'],
['copyLibimg'],
['copyMedia'],
done);
});ok,最后一下就直接运行就可以了
D:\DFF\PROJECT\KJW_HTML>gulp
[19:41:14] Using gulpfile D:\DFF\PROJECT\KJW_HTML\gulpfile.js
[19:41:14] Starting 'default'...
[19:41:14] Starting 'assetRev'...
[19:41:14] Finished 'assetRev' after 123 ms
[19:41:14] Starting 'revCss'...
[19:41:14] Finished 'revCss' after 25 ms
[19:41:14] Starting 'revJs'...
[19:41:14] Finished 'revJs' after 75 ms
[19:41:14] Starting 'revIco'...
[19:41:14] Finished 'revIco' after 3.06 ms
[19:41:14] Starting 'revHtml'...
[19:41:16] Finished 'revHtml' after 1.34 s
[19:41:16] Finished 'default' after 1.58 s
D:\DFF\PROJECT\KJW_HTML>你运行完后就可以看到所有静态文件后面都有版本号了，因为有些不用改的资源目录不用变，如jq和其他功能插件
加完之后：
摘要: 更多前端学习请加群：JS/NDEJS/HTML5/（前端）458633781 或关注心魅体公众号：ilittlekiss