廢話：好多后期要給工程增加版本號，清理瀏覽器緩存贺纲，所以使用這個鬼來搞一把
當(dāng)然這里需要你用nodeJS的npm工具安裝一些東西
不會nodejs,你先百度一把赶盔！
準(zhǔn)備工作：你需要用npm包安裝這些插件店枣。
npminstall--save-dev gulpnpminstall--save-dev gulp-revnpminstall--save-dev gulp-rev-collectornpminstall--save-dev gulp-asset-revnpminstall--save-dev run-sequence
當(dāng)然我第一次安裝失敗了，啟動不了gulp;
于是瓶蚂，我用了全局安裝gulp 命令為：
npm-g install gulp
我用的win7，所以在CMD中運行一把就發(fā)現(xiàn)安裝成功了
好了宣吱，開始為我們工程增加版本號
第一步：打開node_modules\gulp-rev\index.js
找到下面的代碼窃这，將注釋掉的改為下面的內(nèi)容，此處為改變返回的版本號格式
/*manifest[originalFile] = revisionedFile;*/manifest[originalFile] = originalFile +'?v='+file.revHash;
第二步：打開node_modules\rev-path\index.js
找到下面的代碼征候，將注釋掉的改為下面的內(nèi)容杭攻，此處為改變關(guān)聯(lián)的下劃線（老姿找了半天找不到這個rev-path，是因為以前的gulp-rev插件將這部分集成在了里面疤坝，而后續(xù)的版本將rev-path從gulp-rev里抽離出來了兆解，所以要在項目目錄的node_modules里找這個插件，我們不需要手動安裝跑揉，這是gulp-rev的依賴锅睛，npm會自動安裝！）
/*returnfilename+'-'+ hash + ext;*/returnfilename+ ext;
第三步：打開node_modules\gulp-rev-collector\index.js
找到下面的代碼，將注釋掉的改為下面的內(nèi)容现拒，此文件最好改三個地方
一處：
/*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,"\\$&");//禁止重復(fù)添加版本號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})*");
以上都做過多了乖订，就可以創(chuàng)建一個文件，當(dāng)然這個目錄最好創(chuàng)建在工程名下第一級目錄
例如我的目錄為：
第四步：創(chuàng)建一個gulpfile.js文件所在目錄如下具练。
內(nèi)容為：
//引入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)//該任務(wù)針對的文件.pipe(assetRev())//該任務(wù)調(diào)用的模塊.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'));});//開發(fā)構(gòu)建gulp.task('default',function(done){? condition =false;? runSequence(//說明扛点，用gulp.run也可以實現(xiàn)以上所有任務(wù)哥遮，只是gulp.run是最大限度的并行執(zhí)行這些任務(wù)，而在添加版本號時需要串行執(zhí)行（順序執(zhí)行）這些任務(wù)陵究，故使用了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>
你運行完后就可以看到所有靜態(tài)文件后面都有版本號了眠饮，因為有些不用改的資源目錄不用變，如jq和其他功能插件
加完之后：
摘要: ?更多前端學(xué)習(xí)請加群：JS/NDEJS/HTML5/（前端）458633781?或關(guān)注心魅體公眾號：ilittlekiss
