1.背景介紹
公司項目前端框架依賴于.net的aspx框架,代碼迭代時間長,大部分代碼較為老舊,資源文件(如js,css,圖片等)與前端文件(html,aspx)依賴關(guān)系復(fù)雜,改動一個資源文件,為了去除緩存,需要修改多個地方的依賴版本馏慨。
對于一次完整的發(fā)布,所改動的資源文件數(shù)量較多,所需要改動的依賴版本號更是數(shù)量龐大,不免有所遺漏,導(dǎo)致緩存的存在.尋求一種一鍵自動統(tǒng)一替換依賴版本號的方案刻不容緩帆焕。
2.gulp的接入
2.1 gulp介紹
當(dāng)下最熱門的前端構(gòu)建工具當(dāng)屬gulp和webpack,所謂“工欲善其事公般，必先利其器”圾浅，一個好的構(gòu)建工具能大大提升開發(fā)效率葵擎，此處我們采用gulp實現(xiàn)資源版本的統(tǒng)一管理捂齐。
gulp是一個自動化構(gòu)建工具,它能夠?qū)㈤_發(fā)流程中讓人痛苦或耗時的任務(wù)自動化甘桑，從而減少你所浪費(fèi)的時間、創(chuàng)造更大價值撵割。
好的構(gòu)建工具往往是由一系列插件組合而成贿堰，此處簡單介紹一下gulp的一些常用插件:
gulp-imagemin 壓縮圖片
gulp-sass 將scss文件轉(zhuǎn)為css
gulp-postcss 與autoprefixer配合使用
gulp-open 默認(rèn)瀏覽器打開指定頁面
gulp-htmlmin 最小化html文件
gulp-minify-css 最小化css
gulp-uglify 混淆js文件
gulp-concat 合并js,css文件
gulp-replace 對指定文件內(nèi)容進(jìn)行替換，可以用正則
gulp-usemin 將html中外鏈的css和js文件
gulp-zip 將文件打包成zip
gulp-sequence 串行執(zhí)行任務(wù)啡彬，相對于gulp.task中依賴的任務(wù)是并行執(zhí)行的
gulp-rev-all 對js或css文件加MD5戳官边，緩存用
gulp-asset-rev 資源文件替換
gulp-clean 清楚文件/文件夾
gulp-sequence 序列化執(zhí)行task
gulp-bom 文件編碼格式添加bom
2.2 gulpfile的文件編寫
此處我們使用以上4個插件(gulp-asset-rev gulp-clean gulp-sequence gulp-bom)來實現(xiàn)統(tǒng)一修改版本的方案
首先我們先創(chuàng)建package.json引入插件與gulp:
//引入插件
"devDependencies": {
"gulp": "3.9.1",
"gulp-asset-rev": "0.0.15",
"gulp-clean": "0.3.2",
"gulp-bom": "3.0.0",
"gulp-sequence": "1.0.0",
},
然后我們需要創(chuàng)建gulpfile.js編寫自動化流程
const gulp = require('gulp');
const clean = require('gulp-clean');
const assetRev = require('gulp-asset-rev');
const bom = require('gulp-bom');
const gulpSequence = require('gulp-sequence').use(gulp);
gulp.task('API', function() {
return gulp.src("./API/**/*").pipe(assetRev({verStr:'xx.xx.xx'})).pipe(bom('in')).pipe(gulp.dest('./dist/API'));
});
gulp.task('CMS', function() {
return gulp.src("./CMS/**/*").pipe(assetRev({verStr:'xx.xx.xx'})).pipe(bom('in')).pipe(gulp.dest('./dist/CMS'));
});
// 清理api
gulp.task('cleanAPI', function() {
return gulp.src('API', {read: false}) .pipe(clean())
});
// 清理cms
gulp.task('cleanCMS', function() {
return gulp.src('CMS', {read: false}).pipe(clean())
});
gulp.task('updateAPI', function() {
return gulp.src("./dist/API/**/*")
.pipe(bom('out')).pipe(gulp.dest('./API'));
});
gulp.task('updateCMS', function() {
return gulp.src("./dist/CMS/**/*")
.pipe(bom('out')).pipe(gulp.dest('./CMS'));
});
//刪除已使用完畢的生成的文件夾,
gulp.task('clean', function() {
return gulp.src('dist', {
read: false
}).pipe(clean());
});
gulp.task('update-Api', gulpSequence('API', 'cleanAPI', 'updateAPI'))
gulp.task('update-CMS', gulpSequence('CMS', 'cleanCMS', 'updateCMS'))
//主要流程: 依次進(jìn)行update-CMS,update-API,clean 3個task
gulp.task('default', gulpSequence('update-CMS','update-API','clean')); //gulp執(zhí)行順序
2.3 插件的修改
使用過程中發(fā)現(xiàn)插件的效果并不完全是我們想要的效果,所以需要對nodemodule中的插件進(jìn)行代碼修改,
gulp-asset-rev 改動地方如下:
( 1 ) 注釋原有的版本替換,不符合我們的需求
//注釋掉該段代碼
//if (options.verStr) {
// src += options.verStr;
// return tag + '"' + src + '"';
//}
( 2 ) 因為原有文件已有版本號后綴,需要進(jìn)行兼容,每次都重新添加
//新增該段代碼
var assetIndex = assetPath.indexOf('?');
var srcIndex = src.indexOf('?');
if( assetIndex > -1 ){
assetPath = assetPath.substr(0,assetIndex);
}
if( srcIndex > -1 ){
src = src.substr(0,srcIndex);
}
( 3 ) glup-asset-rev使用的是本地文件的md5作為版本號,該方案的好處是只改動有新改動文件的依賴版本號,缺點(diǎn)是文件路徑不規(guī)范或者使用網(wǎng)絡(luò)地址的資源無法獲取md5,添加使用統(tǒng)一傳入的版本號作為備選方案
//修改
//如果獲取md5
src = src += '?v=' + md5;
else{
//使用傳入的版本號
if (options.verStr) {
src = src += '?v=' + options.verStr;
}
gulp-bom 改動地方如下:
( 1 ) aspx文件要求編碼格式為utf-8 with bom格式,所以需要引入gulp-bom,但是圖片等文件在utf-8 with bom的編碼格式下將被損壞,所以需要過濾
//新增
var fileExtension = file.path.substring(file.path.lastIndexOf('.') + 1);
//產(chǎn)出輸出 需要過濾.net框架文件
if (fileExtension != 'html' && fileExtension != 'aspx'
&& fileExtension != 'svc' && fileExtension != 'config'
&& fileExtension != 'cs' && fileExtension != 'pubxml') {
callback(null, file);
return;
}
2.4多人共同使用
以上本地修改了nodemodules中的三方package的代碼,修改的內(nèi)容在重新安裝依賴就沒有了,那要如何防止這種情況以及如何多人一起使用修改后的三方庫代碼呢.
一般常用辦法有兩個：
- 下載別人代碼到本地，放在src目錄注簿，修改后手動引入。
- fork 別人的代碼到自己倉庫跳仿，修改后诡渴，從自己倉庫安裝這個插件。
此處我們使用patch-package來進(jìn)行多人協(xié)作
首先引入
"dependencies": {
"patch-package": "6.2.2"
}
安裝完后使用
npx patch-package gulp-asset-rev
npx patch-package gulp-bom
運(yùn)行后會在項目根目錄下的patches目錄中創(chuàng)建2個補(bǔ)丁文件,補(bǔ)丁文件會在每次npm install的時候進(jìn)行應(yīng)用,達(dá)到多人共同使用的目的菲语。
3.使用
3.1如何使用
相關(guān)自動化文件,補(bǔ)丁已經(jīng)上傳,等v4.5.3版本發(fā)布后,使用front_master新拉的分支都會有相關(guān)配置,使用起來較為簡單:
第一步: npm install 安裝依賴
第二步: gulp 執(zhí)行g(shù)ulpfile.js 進(jìn)行自動化
如有報錯,請查看node版本,npm版本
(ps:此處使用 node版本號 11.15.0 npm版本號 6.7.0)
3.2使用過程中的建議
在后續(xù)開發(fā)中,資源文件(js,css,圖片)盡量使用相對路徑,如
<script type="text/javascript" src="../static/js/base.js"></script>
而不是根目錄表示法
<script type="text/javascript" src="/static/js/base.js"></script>
