快速學習Gulp并接入到項目中

作者：songEagle 2021-08-09 06:27:04

gulp是一個自動化構建工具，主要用來設定程序自動處理靜態資源的工作。簡單的說，gulp就是用來打包項目的。

[[416090]]

一、gulp定位

gulp是基于流(stream)的自動化構建工具。

二、初始化

如果之前已經全局安裝了 gulp ，請通過運行以下命令來刪除舊安裝:

npm rm --global gulp

然后通過以下命令安裝獨立的gulp-cli

npm i --global gulp-cli

為什么廢棄gulp，而改用gulp-cli?

想將cli和gulp進行解耦，處理只位于gulp-cli中。目的：

主要是想在減少安全安裝包的大小。
與主包gulp分開，在不影響gulp-cli流程的情況下進行gulp的功能和bug修復
為后續的sips主題，以及向任務中添加自定義元數據和配置文件。

看一下安裝的版本2.x

gulp -v 
CLI version: 2.3.0 
Local version: Unknown

三、項目中使用gulp

進入到項目中，安裝gulp

npm i --save-dev gulp

執行gulp -v

chengxinsong$ gulp -v 
CLI version: 2.3.0 
Local version: 4.0.2

在項目的根目錄下創建gulpfile.js文件，在文件中輸入以下內容：

function defaultTask(cb) { 
  cb(); 
} 
exports.default = defaultTask;

四、gulp基本轉化流程

找到src目錄下的所有js文件
壓縮這些js文件
將壓縮js代碼輸出到dist/js目錄下

const gulp = require('gulp'); 
const uglify = require('gulp-uglify'); 
gulp.task('gulpSaucxs', function(done) { 
  gulp.src('src/*.js')   // dist與src在共同目錄下 
  .pipe(uglify()) 
  .pipe(gulp.dest('dist/js'));   // 相對路徑 
  done(); 
})

上面代碼中，task方法接收的是任務代碼，接收的必須有回調函數，gulp.src()方法去找src目錄下的js文件，.pipe是接收一個流的結果，并返回一個處理后流的結構，pipe方法中執行uglifg()方法用來壓縮js代碼。gulp.dest()方法輸出到指定相對目錄下。done()方法就是回調函數執行。

gulp.task('任務名'，回調函數)，任務名也是后續gulp 任務名，執行這個任務，回調函數中處理這個任務需要處理的代碼。
src() 方法讀取文件生成一個Node流(stream)，它將所有匹配的文件讀取到內存中并通過流(stream)進行處理。
Node流(stream)所提供的主要API方法pipe()方法。
dest()方法接收一個輸出目錄作為參數，將文件內容以及文件屬性寫入到指定的目錄中。

我們在src下新建一個index.js文件，我們來寫最長遞增子序列的方法。

// 最長遞增子序列 
function lis(n) { 
  if (n.length === 0) return 0 
  // 創建一個和參數相同大小的數組，并填充值為 1 
  let array = new Array(n.length).fill(1) 
  // 從索引 1 開始遍歷，因為數組已經所有都填充為 1 了 
  for (let i = 1; i < n.length; i++) { 
    for (let j = 0; j < i; j++) { 
      if (n[i] > n[j]) { 
        array[i] = Math.max(array[i], 1 + array[j]) 
      } 
    } 
  } 
  let res = 1 
  for (let i = 0; i < array.length; i++) { 
    res = Math.max(res, array[i]) 
  } 
  return res 
}

輸出的已經通過gulp處理的index.js的方法

我們在與gulpfile.js的同級目錄下執行gulp task的名稱

gulp gulpSaucxs

gulp后面跟著的是任務的名稱，不輸入任務名稱的話會默認找default任務，找不到會報錯

然后在與src同級新增dist/js，然后生成壓縮之后index.js文件。

五、逐漸廢棄gulp.task()

官網說是這個task的API不再是推薦的模式。

那還是簡單提2句，這個api伴隨著開發而消失。

gulp.task(name[, deps], fn)

name 為任務名
deps 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢后才開始執行。如果沒有依賴，則可省略這個參數
fn 為任務函數，我們把任務要執行的代碼都寫在里面。該參數也是可選的。

六、task任務

每個gulp任務task都是一個異步的js函數。接收一個回調函數作為參數，或者是一個返回 stream，promise，event emitter、child process 或 observable 類型值的函數。

我們繼續改寫上面 gulpSaucxs 的任務。

const gulp = require('gulp'); 
const uglify = require('gulp-uglify'); 
function gulpSaucxs(done) { 
  gulp.src('src/*.js')   // dist與src在共同目錄下 
  .pipe(uglify()) 
  .pipe(gulp.dest('dist/js'));   // 相對路徑 
  done(); 
} 
exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函數被exports導出是公開任務，可以直接被gulp命令直接調用。

導出的 gulpSaucxs 我們可以直接使用gulp命令來執行。

gulp gulpSaucxs

輸出跟最初是一致的。

導出任務

被gulpfile導出export的任務為公開任務，未被導出的任務會被認為是私有任務。

還是在剛才的代碼中，我們新增privateTask方法和導出組合任務。

const gulp = require('gulp'); 
const uglify = require('gulp-uglify'); 
function gulpSaucxs(done) { 
  gulp.src('src/*.js')   // dist與src在共同目錄下 
  .pipe(uglify()) 
  .pipe(gulp.dest('dist/js'));   // 相對路徑 
  done(); 
} 
// 新增的私有任務 
function privateTask(done) { 
  console.log('hello 「松寶寫代碼」') 
} 
exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函數被exports導出是公開任務，可以直接被gulp命令直接調用。 
exports.composeTask = gulp.series(gulpSaucxs, privateTask);  // 導出組合任務

上面的代碼中，privateTask 方法就是沒有被直接導出的方法，稱為私有任務;gulpSaucxs 方法是被導出的方法，稱為公共任務。

私有任務的設計主要是為了內部的使用，通常作為gulp.series()和gulp.paralle()組合的組成部分。

這時候我們執行

gulp composeTask

執行結果

gulp-test chengxinsong$ gulp composeTask 
[16:14:52] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[16:14:52] Starting 'composeTask'... 
[16:14:52] Starting 'gulpSaucxs'... 
[16:14:52] Finished 'gulpSaucxs' after 8.32 ms 
[16:14:52] Starting 'privateTask'... 
hello 「松寶寫代碼」 
[16:14:52] Finished 'privateTask' after 1.21 ms 
[16:14:52] Finished 'composeTask' after 12 ms

我們看日志，series方法是按照順序執行，同步執行。

先啟動公共任務 composeTask，
開啟 gulpSaucxs 任務方法
完成 gulpSaucxs 任務方法
然后8.32毫秒之后
開啟 privateTask 任務方法
輸出 hello 「松寶寫代碼」
完成 privateTask 任務方法
然后1.21毫秒之后
完成公共任務 composeTask，

組合任務

gulp提供了2個強大的組合方法：series() 和 parallel()，允許將多個獨立的任務組合為一個更強大的操作。

特點：

都可以接受任意數目的任務Task函數或者已經組合的操作
series()方法和parallel()方法可以相互嵌套任意深度

我們把上面的例子的series方法換成parallel。

const gulp = require('gulp'); 
const uglify = require('gulp-uglify'); 
function gulpSaucxs(done) { 
  gulp.src('src/*.js')   // dist與src在共同目錄下 
  .pipe(uglify()) 
  .pipe(gulp.dest('dist/js'));   // 相對路徑 
  done(); 
} 
// 新增的私有任務 
function privateTask(done) { 
  console.log('hello 「松寶寫代碼」'); 
  done(); 
} 
exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函數被exports導出是公開任務，可以直接被gulp命令直接調用。 
exports.composeTask = gulp.parallel(gulpSaucxs, privateTask);  // 導出組合任務，以最大的并發來運行

執行

gulp cpmposeTask

執行結果

chengxinsong$ gulp composeTask 
[18:24:35] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[18:24:35] Starting 'composeTask'... 
[18:24:35] Starting 'gulpSaucxs'... 
[18:24:35] Starting 'privateTask'... 
[18:24:35] Finished 'gulpSaucxs' after 8.24 ms 
hello 「松寶寫代碼」 
[18:24:35] Finished 'privateTask' after 9.71 ms 
[18:24:35] Finished 'composeTask' after 12 ms

我們可以輸出日志，可以知道parallel方法是并行的執行任務

先啟動公共任務 composeTask，
開啟 gulpSaucxs 任務方法
開啟 privateTask 任務方法
完成 gulpSaucxs 任務方法
然后8.24毫秒之后
輸出 hello 「松寶寫代碼」
完成 privateTask 任務方法
然后9.71毫秒之后
完成公共任務 composeTask

七、異步執行

當從任務(task)中返回 stream、promise、event emitter、child process 或 observable 時，成功或錯誤值將通知 gulp 是否繼續執行或結束。如果任務(task)出錯，gulp 將立即結束執行并顯示該錯誤。

1、返回stream流

const gulp = require('gulp'); 
const uglify = require('gulp-uglify'); 
function streamTask(done) { 
  return gulp.src('src/*.js') 
  .pipe(uglify()) 
  .pipe(gulp.dest('dist/js')); 
  done(); 
} 
exports.streamTask = streamTask;

輸出：dist/js/index.js

2、返回promise

看一個返回promise的例子。

const gulp = require('gulp'); 
function promiseTask(done) { 
  Promise.resolve('返回的值'); 
  done(); 
} 
exports.promiseTask = promiseTask;

輸出：

chengxinsong$ gulp promiseTask 
[19:20:37] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[19:20:37] Starting 'promiseTask'... 
[19:20:37] Finished 'promiseTask' after 1.55 ms 
返回的值 「松寶寫代碼」公眾號

3、返回 eventEmitter 事件發射器

看一個返回 eventEmitter 的例子。

// 返回event emitter 
const { EventEmitter } = require('events'); 
function eventEmitterTask(done) { 
  const emitter = new EventEmitter(); 
  setTimeout(() => { 
    emitter.emit('data') 
    console.log(emitter, '松寶寫代碼') 
  }, 500); 
  done(); 
} 
exports.eventEmitterTask = eventEmitterTask;

執行 gulp eventEmitterTask，結果如下：

chengxinsong$ gulp eventEmitterTask 
[21:42:26] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[21:42:26] Starting 'eventEmitterTask'... 
[21:42:26] Finished 'eventEmitterTask' after 1.77 ms 
EventEmitter { 
  _events: [Object: null prototype] {}, 
  _eventsCount: 0, 
  _maxListeners: undefined, 
  [Symbol(kCapture)]: false 
} 松寶寫代碼

4、返回 child process 子進程

看一個返回 childProcess 的例子。

// 返回child_process 子進程 
const { exec } = require('child_process'); 
function childProcessTask(done) { 
  exec('data'); 
  console.log('松寶寫代碼') 
  done(); 
} 
exports.childProcessTask = childProcessTask;

執行 gulp childProcessTask ，結果如下：

chengxinsong$ gulp childProcessTask 
[21:48:32] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[21:48:32] Starting 'childProcessTask'... 
松寶寫代碼 
[21:48:32] Finished 'childProcessTask' after 7.02 ms

5、返回 RxJS observable 觀察對象

看一個返回 observable 的例子。

// 返回 observable 觀察對象 
const Observable = require('rx').Observable; 
function observableTask(done) { 
  Observable.return('松寶寫代碼'); 
  console.log('松寶寫代碼') 
  done(); 
} 
exports.observableTask = observableTask;

執行 gulp observableTask ，結果如下：

chengxinsong$ gulp observableTask 
[21:53:14] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[21:53:14] Starting 'observableTask'... 
松寶寫代碼 
[21:53:14] Finished 'observableTask' after 2.28 ms

6、使用 callback 回調函數

看一個使用 callback 回調函數的例子。

如果任務(task)不返回任何內容，則必須使用 callback 來指示任務已完成。

如需通過 callback 把任務(task)中的錯誤告知 gulp，將 Error 作為 callback 的參數。

// 返回 callback 回調函數 
function callbackTask(done) { 
  console.log('松寶寫代碼') 
  done(new Error('拋出錯誤了')); 
} 
exports.callbackTask = callbackTask;

執行 gulp callbackTask 結果

chengxinsong$ gulp callbackTask 
[21:58:22] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[21:58:22] Starting 'callbackTask'... 
松寶寫代碼 
[21:58:22] 'callbackTask' errored after 2.09 ms 
[21:58:22] Error: 拋出錯誤了 
    at callbackTask

7、使用 async/await

看一個使用 async/await 異步函數的例子。

可以將任務(task)定義為一個 async 函數，它將利用 promise 對你的任務(task)進行包裝。這將允許你使用 await 處理 promise，并使用其他同步代碼。

// 使用 async/await 回調函數 
const fs = require('fs'); 
async function asyncTask(done) { 
  const { version } = fs.readFileSync('package.json'); 
  console.log(version, 'version=====') 
  const data = await Promise.resolve('松寶寫代碼'); 
  console.log(data, '松寶寫代碼=========') 
  done(); 
} 
exports.asyncTask = asyncTask;

執行 gulp asyncTask 結果

chengxinsong$ gulp asyncTask 
[22:26:06] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
[22:26:06] Starting 'asyncTask'... 
undefined version===== 
松寶寫代碼 松寶寫代碼========= 
[22:26:06] Finished 'asyncTask' after 2.02 ms

八、我們來看一個實例

比如我們需要

首先清空dist目錄，使用series處理
然后壓縮css和壓縮js 并行進行處理，使用parallel處理
輸出到dist/js和dist/css

// 實例 
const minifycss = require('gulp-minify-css'); //壓縮css 
const del = require('del'); // 刪除目錄 
// 清空目錄 
function clean(done) { 
  del(['dist/**']); 
  done(); 
} 
// 壓縮css 
function minifyCss(done) { 
  gulp.src('src/*.css') 
  .pipe(minifycss()) 
  .pipe(gulp.dest('dist/css')); 
  done() 
} 
// 壓縮js 
function uglifyJs(done) { 
  gulp.src('src/*.js') 
  .pipe(uglify()) 
  .pipe(gulp.dest('dist/js')); 
  done(); 
} 
exports.exampleGulpTask = gulp.series(clean, gulp.parallel(minifyCss, uglifyJs));   // 執行順序 clean => 并行執行 css js 壓縮

責任編輯：姜華來源：松寶寫代碼

Gulp 項目工具