一直對構建很困惑，究其原因，是源于構建相關的文章，總是伴隨著一大堆的構建工具和配置文件。因此，總是未能很確切的理解構建的真正含義。
什么是構建
構建就是把我們在開發環境寫的代碼，轉換成生產環境的代碼。
構建過程
開發環境的代碼
- 我們可能會用到
es6、sass、jsx等，從而需要預編譯 - 我們可能忘記寫
</div>，從而需要語法檢查，各種lint，如HTMLlint Csslint eslit - 我們可能用了
react，他們有一些依賴，從而需要依賴管理 - 我們會更新代碼，從而需要對文件進行版本管理
生產環境的代碼
- 我們希望內容能正確的呈現，從而希望生產環境代碼生成之前能有單元測試
- 希望資源少且小，從而能更快的完成頁面的渲染
綜上，構建過程應該包括
預編譯、語法檢查、詞法檢查、依賴處理、文件合并、文件壓縮、單元測試、版本管理等。
構建工具
比較流行的構建工具用gulp和grunt，具體使用請參考gulp、 grunt。
比較流行打包工具webpack和parcel-bundler，具體使用請參考webpack、parcel-bundler。
思考
構建工具和打包工具有什么區別呢？
個人理解：構建工具，更注重的是前端的自動化流程，如gulp通過流式的文件管理和定制化的任務管理來實現對前端構建流程的管理。而打包工具更注重打包這一過程，主要包括依賴管理和版本管理。
如果你有不一樣的解讀，希望能夠共同交流。
