>[success] # 自動化構建工具 ~~~ 1.舉個例子當項目在使用一些項目使用 ES6代替Javascript，或者scss語法 的時候，我們往往需要寫完后在執行這些對應語法轉換指令例如： （1）執行編譯命令：xx.scss->xx.css （2）執行壓縮丑化命令：xx.js->xx.min.js 如果文件代碼被修改，那么上面兩條命令就要再執行一遍。同樣的，也會有用Less寫CSS，用Jade寫HTML， 用webpack/Browserify模塊化、為非覆蓋式部署的資源加MD5戳等等。自動化構建工具就是用來幫助我們 完成這些重復而機械的工作的 2.'NPM Scripts' 是實現自動化構建工作流的最簡方式,有時候開發階段會在package.json文件里面， 使用scripts字段定義腳本命令，通過指令來執行scss 或者模板工具，壓縮工具的指令，但是存在 問題'對于相對復雜的構建過程就顯得非常吃力' 3.常見的自動化構建工具Grunt、Gulp以及FIS 3.1.'Grunt'由于它的工作過程是基于臨時文件去實現的，所以它的構建速度會相對比較慢， 且處理的環節越多，文件的讀寫次數越多。因此對于超大型項目，文件會非常多，它的構建速度 就會非常慢 3.2.'Gulp' 很好的解決了 Grunt 中構建速度慢的問題，因為它是基于內存去實現的，也就是說它對于 文件的處理環節都是在內存當中完成的，相對于磁盤讀寫速度自然就快了很多。另外它支持同時去執行 多個任務，效率大大提高，且使用方式相比于 Grunt 更加直觀易懂，插件生態同樣非常完善，應該算是目 前市面上最流行的前端構建系統了。 3.3.FIS 是百度的前端團隊推出的一款構建系統它把我們在項目中一些典型的需求盡可能地都集成在內部了 4.可以通過這些自動化構建工具完成類似scss 或者模板工具，壓縮工具的指令統一管理和執行順序 ~~~ [Grunt、Gulp以及FIS](https://www.yuque.com/kongdepeng/rgpm60/xfvuom) [跟多的關于構建工具比較](https://www.cnblogs.com/zs-note/p/7093339.html) [NPM Scripts 介紹](http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html) >[danger] ##### 構建工具 和webpack模塊打包工具區別 ~~~ 1.任務式的構建工具，雖然解決了開發流程中自動化執行預設任務的問題，但不能解決項目中代碼如 何組織成不同功能的代碼包、不同代碼之間如何相互依賴等問題（模塊化問題） ~~~ [參考文章1](https://www.dazhuanlan.com/2020/02/12/5e43b65b6ac40/) [參考文章2](https://blog.csdn.net/qq_36671474/article/details/82227369) ~~~ 1.Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的 具體步驟，工具之后可以自動替你完成這些任務。 2.Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js）， Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個 （或多個）瀏覽器可識別的JavaScript文件。 3.總結'Grunt和Gulp' 像是一個流程，例如先執行語法轉換-》在執行壓縮 項鏈式一步一步執行，'webpack' 遇到需要處理的就通過'loaders'處理，這個執行的步驟是看通過入口進入的文件，里面依賴的內容，再根據 配置規則處理依賴的內容。 ~~~