淺談自動化構建之gulp

一.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文件代碼以下：