想掌握前端的構建工具，有沒有學習路線推薦？

1. 先學普通的文件操作如 mkdir touch cat grep
2. 然後再學一些技巧，如 | || | &> &>&> &>!
3. 然後學寫 bash alias
4. 然後學寫 bash functions
5. 然後使用一些有用的工具，如 fzf、z、vim、curl、wget、homebrew、htop
6. 然後學習構建工具如 make、cmake
7. 然後使用 npm、grunt、gulp、webpack 的時候就很適應了
8. 嘗試寫一個 npm 包
9. 嘗試寫一個 gulp 插件
10. 嘗試寫一個 webpack 插件
11. 在網上說 webpack 難用，讓新人望而卻步
12. 成為 webpack configuration master（webpack 配置大師）

一般的新人從第7步開始，由於沒有經過前6步，所以覺得很難掌握，然後一直停在第7步。

今年我們用的gulp來做的這一塊，gulp 入手倒是比較簡單，但實際上我也花了很多事件來調整整個打包流程，早期的版本是根據yeoman 上面的一個項目來的，當然後來為了和團隊框架相融合，被我改的已經面部全非類。

我自己grunt webpack 都有玩過，基本的路線是

1. 看一下基本內容介紹，官方指導，算是入個門了。
2. 找個腳手架工具看看複雜的玩法。
3. 實際項目是什麼樣子的，然後通過腳手架的模樣去套。

多弄個幾次，就知道這些個工具是要解決哪些問題，通用的解決方法都有哪些。相互之間呢有會有參照。

最後，要和項目緊密結合的工具才是有效的。

一般常用的有兩個：webpack和FIS3。

webpack：有學習成本，插件都是英文文檔，不使用插件基本幹不了活；還要熟悉node的一些知識，配合node語句使用；了解npm（node包工具）的基本用法。中文教程如下：webpack 中文文檔。不過一般大公司都在使用，建議學習。

FIS3：百度出的，不用說都是中文文檔，功能也很豐富；不過也是基於npm的。沒有使用過，沒有心得。

我也正在學習，建議使用webpack應用廣泛，先從npm了解基本知識吧，我個人寫了一小部分說明npm介紹，然後學習webpack基本配置，最後根據使用需要學習node相關語句。node教程如下：API 文檔 | Node.js 中文網，都是語法說明，建議從webpack的用法中，針對性學習。

我的Github：xingkongbj/study_web，明年初會總結一些插件的簡單用法，目前正在學習ES6的新特性。PS：我個人比較喜歡系統學習，然後重複學習同樣的內容，每次都會有新的體會。

照著這上面學，沒什麼問題 https://www.awesomes.cn/repos/Applications/Builds?sort=trend，目前主流是 webpack，當然也有新秀 parcel