前端工程化（Gulp、Webpack）-前言

原由

隨着Web開發日漸複雜化和多元化，早已不是之前寫幾個頁面佈局加上點樣式，再搞幾個jQuery插件就能OK的了。前端作的事情愈來愈多，那麼爲了解放咱們的生產力，提升團隊的寫做效率，咱們就迫切須要一些工具來幫咱們完成一些事情：

內因

• 代碼轉換：有時咱們會採用一些高效的語言，不會直接書寫HTMLCSSJS，可是這些語言瀏覽器原生不支持，就須要工具將其進行轉換；
• 文件優化：爲了減小文件大小、服務器請求，咱們須要工具對代碼進行壓縮、圖片合併等；
• 代碼審查：在團隊協做中，特別是大項目，爲了不沒必要要的錯誤，減小維護成本，咱們須要統一咱們的代碼風格；
• 模塊合併與分割：如今大部分採用模塊化的開發，咱們須要工具可以分析咱們模塊的依賴關係，對其進行合理的分割和合並。
• 愉快的開發環境：在開發的時候，咱們但願最大程度的解放咱們的雙手，把那些重複機械的工做交給工具去作，好比自動刷新、自動打包發佈等

外因

得益於nodejs的快速發展，讓js有了更大的能力：

• 跳出了瀏覽器的沙盒，可以在命令行中使用
• 可以操做本地文件

這兩點是做爲一個構建工具的必要條件。

發展史

1. Grunt：前端自動化小工具，基於任務的命令行構建工具；
2. Gulp：和Grunt同樣，也是基於Nodejs的自動任務運行器，可是採用流的方式，利用管道思路，前一節點的輸出做爲下一節點的輸入，最後一步才輸出文件到磁盤，大大提升了構建時間和性能。
3. webpack：模塊化管理和打包工具，將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載，和前面的兩個有明顯的區別。
4. 固然這其中也有其餘的一些工具的出現，好比：Rollup（和 Webpack 很相似但專一於 ES6 的模塊打包工具，但生態不如webpack），Fis3（來自百度的優秀國產構建工具，功能很是強大，可是官方已經再也不維護），yeoman（腳手架自動生成工具，提供了不少項目模板），Bower（包），browserify（打包工具）
5. 最近也有一匹黑馬出現-Parcel，利用緩存提高性能與速度，零配置。待生態完善後有可能超越webpack。

對比

這張圖很清楚的對比了幾種主流的構建工具。

（圖片來自網絡）