废话：好多后期要给工程增加版本号，清理浏览器缓存，所以使用这个鬼来搞一把
当然这里需要你用nodeJS的npm工具安装一些东西
不会nodejs,你先百度一把！
准备工作：你需要用npm包安装这些插件。
npminstall--save-dev gulpnpminstall--save-dev gulp-revnpminstall--save-dev gulp-rev-collectornpminstall--save-dev gulp-asset-revnpminstall--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会自动安装！）
/*returnfilename+'-'+ hash + ext;*/returnfilename+ 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,"\\$&");//禁止重复添加版本号varrp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g,"\\$&"); rp = pattern +"(\\?v=(\\d|[a-z]){8,10})*";returnrp;
三处：
/*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插件vargulp =require('gulp'), assetRev =require('gulp-asset-rev'), runSequence =require('run-sequence'), rev =require('gulp-rev'), revCollector =require('gulp-rev-collector');//定义css、js源文件路径并且可以传入多个不同的文件夹varcssSrc ='css/*.css', jsSrc ='js/lib/config.js', jsSrcc ='js/loacal/*/*.js', ico ='img/icon/*.ico';//为css中引入的图片/字体等添加hash编码gulp.task('assetRev',function(){returngulp.src(cssSrc)//该任务针对的文件.pipe(assetRev())//该任务调用的模块.pipe(gulp.dest('css'));//编译后的路径});//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revCss',function(){returngulp.src(cssSrc) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css'));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revJs',function(){returngulp.src([jsSrcc,jsSrc]) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/js'));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revIco',function(){returngulp.src(ico) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/ico'));});//Html替换css、js文件版本gulp.task('revHtml',function(){returngulp.src(['rev/**/*.json','html/*/*.html']) .pipe(revCollector()) .pipe(gulp.dest('html'));});//开发构建gulp.task('default',function(done){ condition =false; runSequence(//说明，用gulp.run也可以实现以上所有任务，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.['assetRev'], ['revCss'], ['revJs'], ['revIco'], ['revHtml'], 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'after123ms[19:41:14] Starting'revCss'...[19:41:14] Finished'revCss'after25ms[19:41:14] Starting'revJs'...[19:41:14] Finished'revJs'after75ms[19:41:14] Starting'revIco'...[19:41:14] Finished'revIco'after3.06ms[19:41:14] Starting'revHtml'...[19:41:16] Finished'revHtml'after1.34s[19:41:16] Finished'default'after1.58sD:\DFF\PROJECT\KJW_HTML>
你运行完后就可以看到所有静态文件后面都有版本号了，因为有些不用改的资源目录不用变，如jq和其他功能插件
加完之后：
摘要: 更多前端学习请加群：JS/NDEJS/HTML5/（前端）458633781 或关注心魅体公众号：ilittlekiss
