本文所述蔬崩，一個(gè)老舊gulp前端原生項(xiàng)目（html,js,css）的基礎(chǔ)上進(jìn)行改造的隙疚，本文章是在對(duì)改造過(guò)程中各個(gè)階段遇到的問(wèn)題以及解決方式進(jìn)行的一個(gè)總結(jié)。
文檔目錄結(jié)構(gòu)如下：
最初問(wèn)題1
老項(xiàng)目的gulpfile.js 中的build代碼部分是對(duì)src下所有文件的build處理萌衬，最開(kāi)始時(shí)候項(xiàng)目文件較少胰苏，build速度較快，但隨著業(yè)務(wù)擴(kuò)大岸更，項(xiàng)目文件也逐漸增多鸵膏，導(dǎo)致build耗時(shí)越來(lái)越長(zhǎng)，平均耗時(shí)3分鐘左右坐慰，嚴(yán)重影響開(kāi)發(fā)效率较性。
解決方法1：
思路： 由于每次build都要遍歷處理所有文件，但是需要處理的真正 改動(dòng)文件 是很少的结胀，所以思路就是赞咙，過(guò)濾掉沒(méi)有變動(dòng)的文件，只處理改動(dòng)的文件糟港。
方法： 使用 gulp-changed 插件攀操，過(guò)濾沒(méi)有變動(dòng)的文件。由于老項(xiàng)目的build代碼任務(wù)入口有很多秸抚，所以需要在所有處理文件的入口處都加入 gulp-changed速和。
原理： 保留原來(lái)build過(guò)程中的 .dist 目錄，作為build代碼的緩存目錄剥汤，每次build會(huì)對(duì)比src與.dist目錄下同名文件的最近修改時(shí)間颠放，只有最新修改時(shí)間晚于上次.dist緩存的文件修改時(shí)間時(shí)，才會(huì)通過(guò)管道進(jìn)入到下一個(gè)pipe吭敢。
gulp.src(['./src/**'])
.pipe(changed(DEST))
.pipe(gulp.dest(DEST))
解決方法2：
思路：每次build可以指定只build某個(gè)文件夾碰凶。
方法： 使用 node 的環(huán)境變量 process.env.NODE_ENV 傳參給gulp， 每次可以指定需要build的文件夾。build過(guò)程與全局build一樣欲低。
gulp.task("obuild", function(callback) {
gulp.src(["./src/" + options.env + "/**"])
.pipe(gulpif(["*.css", '**/*.css'], minifyCss()))
.pipe(gulpif(["*.js", "**/*.js"], uglify()))
.pipe(gulp.dest("./.dist/" + options.env ))
最初問(wèn)題2
不同電腦辕宏，Mac，每次build代碼使用 gulp-rev 添加的hash值會(huì)有所變動(dòng)砾莱，導(dǎo)致變動(dòng)文件過(guò)多瑞筐。
思路：不同電腦，build同一個(gè)文件使用 gulp-rev 添加hash值不同的原因腊瑟，是處理文件的順序不同聚假。
方法： 在處理文件入口處加入 gulp-sort 插件，來(lái)對(duì)內(nèi)存中的文件排序之后再往下pipe扫步，調(diào)用gulp-rev魔策。
gulp.src(['.dist/**/*.*(js|css|jpg|png|webp|gif|jpeg'])
.pipe( sort() )
.pipe( rev() )
.pipe( gulp.dest('dist') )
延伸問(wèn)題
針對(duì)“問(wèn)題1”，添加的兩種方式河胎，全局build 和 單個(gè)文件夾build闯袒，要做到相互不影響。
方法： 全局build游岳，按照原有方案進(jìn)行政敢。單個(gè)build，為了不影響全局build出的dist文件胚迫，需要增加只刪除dist目錄下指定文件夾邏輯喷户。并且生成自己的rev-manifest.json，以替換自己文件夾下文件的hash值访锻，但是為了保證單個(gè)文件夾下也可以引入外部全局下的js或者css文件褪尝，全局生成的rev-manifest.json不能刪除，以保證在build單個(gè)文件夾時(shí)能夠先使用全局生成的json文件替換引用的全局文件期犬。
不足之處
1河哑、對(duì)于問(wèn)題1的第一種方法，使用gulp-changed插件實(shí)則對(duì)比文件的最近修改時(shí)間龟虎，多人協(xié)作開(kāi)發(fā)工程中可能會(huì)出現(xiàn)電腦系統(tǒng)時(shí)間不一致的問(wèn)題璃谨。所以，多人協(xié)作開(kāi)發(fā)前鲤妥，請(qǐng)保證每個(gè)電腦的系統(tǒng)時(shí)間都同步為網(wǎng)絡(luò)時(shí)間佳吞。
2、對(duì)于問(wèn)題2棉安，使用的gulp-sort插件底扳，實(shí)則是當(dāng)gulp任務(wù)開(kāi)始后，排序的是內(nèi)存中的文件贡耽，可能出現(xiàn)windows 與 Mac之間內(nèi)存處理機(jī)制不一致導(dǎo)致hash值不一致的問(wèn)題花盐。所以多人開(kāi)發(fā)時(shí)盡量保證使用同樣的電腦羡滑。
總結(jié)：
本次項(xiàng)目?jī)?yōu)化，共有下面幾點(diǎn)成效：
- 原本耗時(shí)將近3分鐘的全局build任務(wù)算芯，現(xiàn)在耗時(shí)只為 20s 左右。
- 原本多人使用Mac開(kāi)發(fā)凳宙，build代碼生成的文件hash值不同的問(wèn)題熙揍，得到解決。
- 增加單個(gè)文件夾文件build任務(wù)氏涩，可以高效提高開(kāi)發(fā)效率届囚。
