一.gulp的基本使用
gulp是目前最流行的前端自動化構建系統,核心特點高效易用。（這塊不過多的廢話了,直接上乾貨了，有興趣的話，可以查下gulp簡介）
步驟如下：
yarn init -y
yarn add gulp --dev //安裝開發依賴
根目錄建立gulofile.js檔案（gulp的入口執行檔案）
二.建立組合任務
除了建立普通任務,gulp提供了一些建立組合任務的api，比如series,parallel
三.非同步的三種形式
四.gulp壓縮程式碼構建過程的核心工作原理
通過底層node的api實現過程.讀取-轉換-寫入
五.gulp檔案操作API+外掛的使用
專門建立讀取流和寫入流的api,相比於底層node的api更加強大，也更加實用
yarn add gulp-clean-css --dev 安裝壓縮檔案的轉化流
yarn add gulp-rename --dev也可以重新命名擴充名
六.gulp案例
本案例想通過gulp轉換sass,es6,html,image,fonts等轉化為壓縮編譯後生產的制定格式。
首先安裝gulp依賴,yarn add gulp --dev
1.樣式編譯
yarn add gulp-sass --dev
2.指令碼編譯
yarn add gulp-babel --dev
yarn add @babel/core @babel/preset-env --dev
3.模板引擎編譯
這裡使用的模板引擎叫做swig,編譯成html
yarn add gulp-swig --dev
但是從上面挨個編譯的話 不方便，建立組合任務，同時執行，使用parellel同時執行三個互不干擾的任務
4.gulp案例-圖片和字型檔案轉換
yarn add gulp-imagemin --dev //壓縮圖片,字型檔案
5.gulp案例-其他檔案及檔案清除
對於其它的檔案 可以再定義個變數 這樣編譯過程不容易混淆 （個人感覺）
每次重新編譯之前，安裝清除del的外掛進行刪除操作。
yarn add del --dev 這個外掛不是gulp的外掛 所以單獨匯入。
6.gulp案例-自動載入外掛
如果說引用gulp的外掛太多,挨個require的話不利於後期回顧程式碼，所以建議採用自動載入的方式載入外掛
yarn add gulp-load-plugins --dev
用法為const loadPlugins=require('gulp-load-plugins') const Plugins=loadPlugins()
例如:require('gulp-sass') 下面的引用為Plugins.sass
如果為require('gulp-sass-xx') 下面的引用為Plugins.sassXx（採用駝峰命名法）
7.gulp案例-開發伺服器
yarn add broswer-sync --dev
8.gulp案例 監聽原始碼變化以及構建優化
藉助gulp裡面watch api,通過監聽原始碼的變化，自動編譯到dist目錄
9.gulp案例 useref檔案引用處理
對於dist生成的html檔案中遇到引用本地路徑的情況，比如引用node_modules路徑下的css檔案，這時候生產上肯定是不能用的,
我們可以通過一個gulp的方法，如下圖所示紅框中的構建註釋，意思是通過gulp外掛找到檔案位置打包到一個檔案中。
yarn add gulp-useref --dev
10.gulp案例-檔案壓縮
yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
由於是三種型別的壓縮外掛（html,css,js）要加下gulp-if的外掛要安裝依賴
yarn add gulp-if --dev
完整的gulpfile.js的註釋檔案及package.json檔案程式碼如下：
