自動化構建
開發行業的自動化構建 一句話把原始碼轉化為生產程式碼，作用是脫離執行環境相容帶來的問題開發階段使用提高效率的語法,規範
和標準，構建轉換那些不被支援的特性轉化成能夠執行的程式碼。
一.簡單的自動化構建案例
簡介:通過scss增強css的程式設計性,以及通過執行一些簡單的命令列命令搭建啟動服務，熱載入，編譯的簡單的自動化構建功能,功能
比較簡單,只做步驟說明用法及npm scripts程式碼截圖展示....
首先安裝sass yarn add sass --dev
通過node-modules找到.bin下面的sass路徑 執行.\node_modules\.bin\sass命令 會指出具體用法，如下圖所示可以看 要有個輸入路
徑和輸出路徑
執行指令.\node_modules\.bin\sass scss/main.scss css/style.css (輸入輸出為我自己的路徑)每次都要去接收這些複雜的命令，不切
合實際，npm Scripts來解決這些問題
安裝browser-sync --dev模組 用於啟動測試伺服器
preserve鉤子命令 會在鉤子命令執行serve之前去執行"preserve":"yarn build"，也可以新增同時執行的模組 yarn add npm-run-all --
dev
二.常用的自動化構建工具
目前最流行的自動化構建工具grunt gulp fis
grunt最完善的構建工具，用官方的一句話說，grunt能夠幫你構建你想要做的任何一件事情，缺點:基於磁碟讀寫，處理的環節越多,
檔案讀寫的次數較多，對於大型專案構建速度比較慢。
gulp解決了grunt中構建速度比較慢的問題，gulp基於記憶體去實現的，預設同時去執行多個任務，實現方式相對於grunt更加直觀易懂，
外掛系統也基本完善，是目前最流行的自動化構建工具。
fis百度團隊推出的一款構建系統，更像是一種捆綁套餐，資源載入，程式碼部署，效能優化都可以輕而易舉的完成，國內很受歡迎,比較
適合新手。
三.grunt的基本使用
1.yarn init -y
2.yarn add grunt
3.根目錄建立gruntfile.js檔案
4.執行yarn grunt foo (yarn會找到node_modules中的命令,foo為我們註冊的名字)
Grunt標記任務失敗
在我們構建任務時。例如我們的檔案找不到了，那我們就可以將這個任務標記為失敗的任務具體實現,我們可以標記這個任務為return
false,具體實現如下圖所示
Grunt配置選項方法
grunt新增了一些配置選項的api叫做initConfig,例如我們要壓縮檔案時，需要我們配置壓縮檔案的檔案路徑
Grunt 多目標任務
理解為子任務概念,後續通過grunt實現構建任務時非常有用
Grunt 外掛的使用
grunt的核心，封裝了一些通用的構建任務，下面舉個外掛例子，清除專案中的臨時檔案
yarn add grunt-contrib-clean
yarn grunt clean
Grunt 常用外掛案例
yarn add grunt-sass sass --dev
yarn add grunt-babel @babel/core @babel/preset-env --dev
隨著模組的複雜程度的增加,減少loadNpmTasks的使用load-grunt-tasks模組
yarn add load-grunt-tasks --dev
yarn add grunt-contrib-watch --dev 監聽編譯
yarn grunt
