折騰
從 2015 到現(xiàn)在致燥，短短的三年內(nèi)蹭沛，幾乎每年折騰一下工作流的 “ 更新?lián)Q代 ”辽剧。從最早開始使用 Grunt 到 Gulp 再到 Webpack送淆，再到 Rollup，再到 Webpack@2.x ......
在這個(gè)前端工具變化如此之快的浪潮里怕轿，在前端團(tuán)隊(duì)中偷崩，并發(fā)合作開發(fā)多個(gè)項(xiàng)目，前后端分離等等情況下撞羽，配置 或者 升級 或者 遷移 這樣的工作流 基本生產(chǎn)工具阐斜，往往造成耗費(fèi)的就不是僅僅一個(gè)人的時(shí)間成本，而是十人诀紊，數(shù)十人的量級谒出。
所以 一個(gè)靠譜、穩(wěn)定邻奠、有效的工作流方案就顯得特別重要笤喳。
Gulp
14 年 15 年初窥淆，因?yàn)闃?gòu)建性能等問題浩蓉，已經(jīng)從 Grunt 遷移到 Gulp 了 （ duowan/generator-lego ）济榨。從開源的 Github 倉庫上不難看出杨刨，主要 工作流 是基于命令行的形式，配合 yeoman 腳手架工具困檩，以 Gulp 任務(wù)為核心的四瘫。
對于 Gulp 定義捶索，官方的說法是
gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
表明著八孝，Gulp 是一個(gè)專門幫你處理一些痛苦耗時(shí)的自動化任務(wù)工具董朝。
在這個(gè)表述中，Gulp 傾向的是于對 “任務(wù)” 這個(gè)概念的處理干跛，而這個(gè) “任務(wù)”子姜，其實(shí)如果我們都嘗試配置過 Gulp 的話，也就大概明白是怎樣的一回事楼入。
在這段時(shí)間期間哥捕，團(tuán)隊(duì)面向的業(yè)務(wù)，主要分類占比最大的是 專題類嘉熊，運(yùn)營類遥赚。
在這類專題基本入口都是從 HTML 開始，寫 HTML Dom 結(jié)構(gòu)阐肤，寫樣式凫佛，再后可能就寫一些 JS 動效或者 AJAX 。幾乎 JS 占比分量是超級少的孕惜，個(gè)別頁甚至沒有腳本愧薛，單純給到 HTML & CSS 給到后端同事直出數(shù)據(jù)。
那時(shí)候 Gulp 所配置的任務(wù)
- 監(jiān)聽匹配文件的變化自動刷新瀏覽器
- 自動編譯 SASS
- 自動補(bǔ)全 CSS3 前綴
- 多雪碧圖合并衫画、2x毫炉、3x 拼圖
- 等等
基于編譯 HTML / SASS / 圖片的任務(wù)，已經(jīng)是完全滿足我們的需求了削罩。
Webpack
在 15 年末開始瞄勾，漸漸接入的業(yè)務(wù)方向改變，需要接觸到 Vue弥激，也就漸漸發(fā)現(xiàn) Gulp 對于 JS 模塊處理的局限性丰榴。也在這時(shí)候，開始衡量是否需要遷移到 Webpack秆撮。
對于 Webpack 定義四濒，官方的說法是
webpack, the production / unbiased / flexible / extensible / open source module bundler.
表明著，Webpack 是一個(gè) xxx 的打包器职辨。
而在這個(gè)表述中盗蟆，Webpack 更多的偏向于資源的整理打包。而這個(gè)打包的開始舒裤，就是 定義在配置上的 entry喳资。
對于 Vue 或 React 這類型的項(xiàng)目，Webpack 無疑是最最最適合不過了腾供，以 JS 模塊為編寫入口仆邓，生成依賴鏈鲜滩，整理打包出 HTML / JS / CSS / 圖片。
開始本來也就以為 單單工作流核心 將 Gulp 遷移到 Webpack节值，這樣就可以輕松解決徙硅。
直至到后來在 雪碧圖的合并，2x / 3x 多倍圖的輸出上搞疗，在 Webpack 上苦苦找尋不了比較完美的解決方案等等嗓蘑。
另外團(tuán)隊(duì)還存有一些 專題業(yè)務(wù)類 的需求，也需要兼容舊有項(xiàng)目匿乃，團(tuán)隊(duì)成員開發(fā)時(shí)候桩皿，切換前端生產(chǎn)工具的適應(yīng)性等，帶來了一系列的問題幢炸。
這時(shí)迫切希望有 更加簡便泄隔、有效的工作流方案。
Gulp + Webpack
既然 Gulp 對任務(wù)處理的強(qiáng)大宛徊，而 Webpack 對 JS 模塊處理的專業(yè)佛嬉，也就衡量著這兩者的混合。
由 Gulp 基于處理 HTML / SASS / 圖片等部分岩调，Webpack 主要對 JS 模塊進(jìn)行編譯巷燥。
帶著這樣的想法，也有網(wǎng)上挺多的思路号枕，例如 gulp + webpack 構(gòu)建多頁面前端項(xiàng)目 缰揪。
但是都忽略了較根本上的問題 :
- 每次 JS 改變都重新通過 Webpack 完整打包輸出，效率沒有保證
- Webpack 下 JS 熱刷新應(yīng)該怎么聯(lián)動 Gulp 的熱刷新
基于解決根本痛點(diǎn)的葱淳，平衡功能钝腺，使用了另外一套方案 :
- Webpack 基于 webpack-dev-server 啟動熱刷新 服務(wù) A
- browser-sync 使用 proxy 代理 服務(wù) A 啟動 服務(wù) B
- Gulp watch HTML / SASS / 圖片 變動
- Gulp watch 變動后觸發(fā) browser-sync reload
- 通過 webpack-dev-server 熱刷新等方式，優(yōu)化 開發(fā)中 JS 構(gòu)建效率
- 通過 proxy 代理 讓 webpack-dev-server 熱刷新同步刷新 瀏覽器
Gulp 負(fù)責(zé)部分的 HTML / SASS / 圖片等任務(wù)基本沒有太大的變動赞厕，因而可以兼容到過往的舊項(xiàng)目需求艳狐，另外團(tuán)隊(duì)成員額外需要了解的是 JS 模塊 Webpack 部分的構(gòu)建，學(xué)習(xí)成本相對降低皿桑，在 2015 年末正式作為工作流解決方案加入在團(tuán)隊(duì)腳手架工具毫目。
走多一步
2016 年初開始，因組內(nèi)成員的增加诲侮，或者工作流功能版本的更新镀虐， 都伴隨著維護(hù)工作流的各種問題 ( 即便寫了不能再詳細(xì)的文檔 )，大致回歸到 Node 版本的兼容性沟绪，node_modules 的版本功能兼容刮便，Windows / macOS 帶來的兼容性等等問題。
這時(shí)在思考著绽慈，能否有包裝多一層去讓這些兼容性問題都 避免開呢 恨旱？
其實(shí)對于這樣的整體封裝辈毯，無疑有兩條路可以走
- 類似于 NW 那樣構(gòu)建出 平臺應(yīng)用
- 類似于 PKG 那樣構(gòu)建出 執(zhí)行程序
在尋找解決方案的時(shí)候，發(fā)現(xiàn)了 weixin/WeFlow 搜贤，但深入發(fā)現(xiàn) WeFlow 僅基于 Gulp 任務(wù)谆沃，功能遠(yuǎn)遠(yuǎn)滿足不了需求。
于是便開始了輪子的重構(gòu)入客，首先遇到問題是 node-sass 的編譯依賴問題管毙，感謝 WeFlow 開發(fā)者分享踩過的坑（ node-sass 依賴環(huán)境問題 · Issue ）腿椎，如果團(tuán)隊(duì)是使用 less 或者 stylus 都無需重置那些依賴桌硫。
另外遇到了最麻煩的問題就是把 webpack 生態(tài) 遷移到應(yīng)用上去，babel 依賴 / vue-loader 依賴 / ..... 其中遇到過各種依賴被重置到全局的問題啃炸，都在 babel 或者 vue-loader 的源碼上進(jìn)行 切面置換依賴铆隘。
經(jīng)過幾個(gè)內(nèi)測版本的開發(fā)下，造出了 legoflow/legoflow
組內(nèi)推行使用后也得到了 贊同的反饋南用，經(jīng)過了幾個(gè)大項(xiàng)目的洗禮后膀钠，從功能性變得更加豐富，兼容性上更加穩(wěn)定裹虫。
而在今年 6 月也對外兼容版本 LegoFlow
走得更遠(yuǎn)
現(xiàn)在工作流中內(nèi)置的 Webpack 還是基于 1.x 版本肿嘲，其實(shí)在年初的時(shí)候是有想法把 整個(gè) Webpack 生態(tài)升級為 2.x，因?yàn)樵?webpack 2.x RC 期間筑公，對 Rollup tree-shaking 已經(jīng)很垂涎了雳窟。
但是 Webpack 正式到 2.x，卻發(fā)現(xiàn)無法兼容到 IE8 ( webpack2 doesn't support IE8 · Issue #3070 · webpack/webpack )匣屡，部分業(yè)務(wù)也脫離不了 IE8 的行列封救。
但計(jì)劃在更遠(yuǎn)一點(diǎn)的時(shí)間下，看看如何能否到實(shí)現(xiàn) Webpack 1.x & 2.x 的無縫切換捣作。
最后
前端團(tuán)隊(duì)幾次的生產(chǎn)力工作流工具的遷移誉结，只是前端這個(gè)大浪潮中最小最小的 縮影。
每次改變像是意味著 進(jìn)化券躁，在如今 這個(gè)前端浮躁的年代惩坑，希望 做著相同事情的我們 有著一如既往的 初心 上下求索。
