前言
隨著移動端的h5項目不斷流行起來，特別是微信中的二次開發(fā)莽鸿。但是令我們特別頭疼的是在調(diào)試的時候昧旨，將項目更新內(nèi)容上傳到服務(wù)器之后，很多靜態(tài)文件在移動端并不能被刷新祥得，而是采用緩存兔沃，這就極大影響了功能更新以及用戶體驗。所以级及，對這些靜態(tài)文件進(jìn)行每次版本標(biāo)注就顯得很有必要了听系。
所以糙臼，進(jìn)入正題：rt,本文主要是實現(xiàn)給web工程中所有的靜態(tài)文件添加版本號，可以實現(xiàn)保存即自動更新版本宅楞。
環(huán)境
-
node.js,windows下載是一個msi的安裝文件，安裝之后帶有npm模塊席纽。Mac建議下載pkg包，也是直接安裝的，安裝之后同樣帶有node環(huán)境和npm模塊伟件。
終端或cmd運行
node -v
npm -v
出現(xiàn)版本號即表示安裝成功。
- 利用npm安裝gulp议经。
$ npm install --global gulp
$ npm install --save-dev gulp
命令的意思是全局安裝斧账。然而一般這樣安裝好了之后還會出現(xiàn)問題，就是找不到gulp命令煞肾，需要配置一下環(huán)境咧织，貼一篇博文自行配制一下。
windows: 'gulp'不是內(nèi)部或者外部命令扯旷，也不是可運行的程序或批處理文件
osx: Gulp command not found after install
同樣拯爽，執(zhí)行命令
gulp -v
出現(xiàn)版本信息即可以使用了。
配制文件
安裝gulp插件
建議在項目目錄下安裝（不安裝全局）钧忽，即喝gulpfile.js同級目錄下運行命令毯炮。
npm install gulp-connect
npm install run-sequence
npm install gulp-rev
npm install gulp-rev-collector
npm install gulp-util
...
應(yīng)該就是這些，如果不夠會有提示找不到命令耸黑，按照提示安裝相應(yīng)的插件即可～
項目結(jié)構(gòu)圖
node_modules里面即是安裝的gulp的插件桃煎。
對gulpfile.js進(jìn)行編寫
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定義css、js源文件路徑
var cssSrc = 'webapp/**/*.css',
jsSrc = 'webapp/**/*.js';
//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'));
});
//Jsp替換css大刊、js文件版本
gulp.task('revJsp', function () {
return gulp.src(['rev/**/*.json', 'webapp/**/*.jsp'])
.pipe(revCollector())
.pipe(gulp.dest('webapp'));
});
//task合并順序執(zhí)行
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revJsp'],
done);
});
//改變相應(yīng)文件之后自動進(jìn)行更新版本號
gulp.task('watch', function () {
gulp.watch([
cssSrc,
jsSrc,
'webapp/**/*.jsp'
], ['dev']);
});
gulp.task('default', ['watch']);
修改相關(guān)插件
更改gulp-rev和gulp-rev-collector
打開node_modules\gulp-rev\index.js第144行
manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打開nodemodules\gulp-rev\nodemodules\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) ) {
//每次覆蓋版本信息
打開node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
運行
在此文件目錄下運行
gulp
即可執(zhí)行default task为迈，即修改webapp下的靜態(tài)文件之后被修改文件的版本號會得到更新，如果是第一次運行可以先運行一次 gulp dev將所有靜態(tài)文件加上版本號缺菌。
