淺談自動化構建之gulp

• 2021 年 1 月 29 日
• 筆記

一.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文件程式碼如下：