來了解前端工程化及構建工具
什麼是工程化？在軟體工程開發中，工程化是必不可少的體系。
前端崛起，前端迅速發展，來滿足大眾各個體驗需求。
對於後端開發者來說，工程化是理所當然，而前端只是UI效果和用戶交互效果，沒有複雜業務邏，也不需操作資料庫，因此無需工程化。
但是他們有所不知，現在前端工程化必要性。不只是做UI效果交互作用或頁面很炫，隨著用戶體驗漸漸要求很高，需要大量優化來改善用戶體驗，例如頁面渲染速度等等。
其實在開發過程中，優化佔用開發者時間相當多，從工程化角度來說，會用到大量重覆性的工作(工程化目標其中有可重用性)。
不只重覆性，給予開發者痛苦是維護性困難，隨著業務發展，程式複雜性提高，也造成程式量越來越多，造成問題出現 網頁性能差，維護成本高，等等。。
自動化構建工具可以為我們解決一些常見問題
在了解構建工具前，需要了解在開發過程中遇到的狀況！
- 減少http請求數，盡可能合併多個js和css文件
- 減少http請求量，盡可能壓縮js和css文件，不影響圖片質感。
- 進行預處理編譯css和js
- 減少重覆性
- 可以以自動化來完成任務
- ….
構建是什麼
我個人理解構建是什麼。如果在以前學習make或者其他shell／bash腳本，對於web會發現很難做出文件管理及其他操作。之後出現了網頁開發專用構建工具，其實很簡單，，聲明好任務後，通過指令，會構建出相對應用。
構建流程是執行項目中任務，主要在開發的時候，把一些需要經過編譯或除錯測試程式，以及在開發過程中所需處理事情。如：壓縮文件，自動化處理，優化圖片品質，css的供应商前缀自動化添加等等
構建工具需滿足什麼需求？
- Fast (快速看到結果，不會打亂工作流程，構建時間比較短)
- 有良好的插件社區支持 （構建工具本身作用不大，依賴於插件）
- 有很多附加功能 (模組和可扩展)
我以這兩種Grunt和Gulp工具來了解前端構建工具。
Grunt是滿足以上需求，它具有強大插件生態系統。但是Gulp出現後，比起Grunt速度效能好很多。Gulp就是為速度而生，可以并行執行任務。
當然還有其他構建打包工具如：強大（webpackjs，Parceljs， Rollupjs，但這些對於我來說太複雜了，目前只有初步了解及使用。其實它們具有構建功能，但本質上，是一種靜態模組打包器。
先大概描述這兩個差異（Grunt和Gulp）
- 使用Grunt，更關注是以配置方式來執行任務
- 使用Gulp，更關注是以程式方式來執行任務，看起來比較直白像是在寫程式。
- Gulp速度比Grunt好原因：
* Grunt是以磁盤來操作，構建效率很低。 * Grunt是按順序執行任務 * Gulp是并行執行任務，所有任務完成後停止
不管怎樣，都取決您的喜好來使用，最終目標工作流程是一樣的。
參考資源來自學習過程中讀過教材及文章。
下一章會以Gulp來實作。