1庐镐，說明：使用gulp為js和css靜態(tài)文件添加版本號，升級服務器代碼后变逃，可以不用強制更新瀏覽器或清空緩存必逆，優(yōu)化用戶體驗。
????本文主要參考http://www.jb51.net/article/100652.htm揽乱， 但是遇到一些小坑名眉，特此記錄
2，預期效果：在原目錄結(jié)構(gòu)下html文件代碼
<link href ="../css/index.css?v=8f204d4">
3凰棉，實現(xiàn)方法：
前提：需要安裝node.js
1损拢、安裝gulp和gulp插件
打開node命令行，cd 進入到項目根文件夾（若安裝失敗撒犀，推薦國內(nèi)的淘寶npm鏡像福压，教程：https://blog.csdn.net/quuqu/article/details/64121812掏秩，使用方法將npm改為cnpm）
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
項目結(jié)構(gòu)目錄為：
2、編寫gulpfile.js
筆者是在templates文件夾( 存放html代碼 )同級文件夾內(nèi)創(chuàng)建的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', ?// 注意這里修改為你的源文件路徑，例如筆者的項目css文件胆筒，設置為 static/css/main/*.css 邮破，js同理。
??jsSrc = 'js/*.js';
//為css中引入的圖片/字體等添加hash編碼
gulp.task('assetRev', function(){
??return gulp.src(cssSrc)? //該任務針對的文件
???.pipe(assetRev()) //該任務調(diào)用的模塊
???.pipe(gulp.dest('src/css')); //編譯后的路徑
});
//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(jsSrc)
????.pipe(rev())
????.pipe(rev.manifest())
????.pipe(gulp.dest('rev/js'));
});
//Html替換css腐泻、js文件版本
gulp.task('revHtml', function() {
??return gulp.src(['rev/**/*.json', 'View/*.html']) // 這里的View/*.html是項目html文件路徑决乎，如果gulpfile.js和html文件同在一級目錄下，修改為return gulp.src(['rev/**/*.json', '*.html']);
????.pipe(revCollector())
????.pipe(gulp.dest('View'));// 注意這里是生成的新的html文件派桩，如果設置為你的項目html文件所在文件夾，會覆蓋舊的html文件蚌斩，若上面的View/*.html修改了铆惑，這里也要相應修改，如果gulpfile.js和html文件同在一級目錄下送膳，修改為??.pipe(gulp.dest(''));
});
//開發(fā)構(gòu)建
gulp.task('default', function(done) {
??condition = false;
??runSequence(??? //需要說明的是员魏，用gulp.run也可以實現(xiàn)以上所有任務的執(zhí)行，只是gulp.run是最大限度的并行執(zhí)行這些任務叠聋，而在添加版本號時需要串行執(zhí)行（順序執(zhí)行）這些任務撕阎，故使用了runSequence.
????['assetRev'],
????['revCss'],
????['revJs'],
????['revHtml'],
????done);
});
3，修改插件
原文到了這里執(zhí)行gulp查看更新效果碌补，建議先不要執(zhí)行虏束。修改完成后再執(zhí)行。
-- 1?
打開node_modules\gulp-rev\index.js
134行：
manifest[originalFile] = revisionedFile;
更新為：
manifest[originalFile] = originalFile + '?v=' + file.revHash;
-- 2?
打開?node_modules\rev-path\index.js ?
注意：原文這里的路徑是打開nodemodules\gulp-rev\nodemodules\rev-path\index.js厦章，根據(jù)你的具體情況進行修改镇匀。
9行?return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
更新為：return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
17行 return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext);
更新為： return modifyFilename(pth, (filename, ext) => filename + ext);
-- 3
打開node_modules\gulp-rev-collector\index.js
40行：var cleanReplacement = ?path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新為：var cleanReplacement = ?path.basename(json[key]).split('?')[0];
-- 4
打開node_modules\gulp-assets-rev\index.js
78行 var verStr = (options.verConnecter || "-") + md5;
更新為：var verStr = (options.verConnecter || "") + md5;
80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
更新為：src=src+"?v="+verStr;
-- 5、更改gulp-rev-collector
打開node_modules\gulp-rev-collector\index.js
第173行
regexp: new RegExp( prefixDelim?+ pattern, 'g' ),
更新為 regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),
4袜啃，執(zhí)行gulp
1 執(zhí)行gulp汗侵，查看html文件是否正確添加版本號。
2 每次更新完代碼群发，執(zhí)行gulp晰韵，再更新到服務器上即可。
