Gulp 快速指南

---

---

Gulp - 概述

什麼是 Gulp？

Gulp 是一個使用 Node.js 作為平臺的任務執行器。Gulp 純粹使用 JavaScript 程式碼，有助於執行前端任務和大型 Web 應用程式。它構建系統自動執行任務，例如 CSS 和 HTML 壓縮、連線庫檔案以及編譯 SASS 檔案。這些任務可以使用命令列上的 Shell 或 Bash 指令碼執行。

為什麼要使用 Gulp？

• 與其他任務執行器相比，它更短、更簡單、更快。
• 使用 SASS 和 LESS 作為 CSS 預處理器。
• 編輯原始檔後自動重新整理頁面。
• 易於理解和構建 Gulpfile.js，因為它使用純 JavaScript 程式碼來構建任務。

歷史

所有 Gulp 的文件都受 CC0 許可證保護。最初，Gulp v1.0.0 於 2015 年 1 月 15 日釋出，當前版本的 Gulp 為 **v3.9.0**。

特性

• 提供壓縮和連線功能。
• 使用純 JavaScript 程式碼。
• 將 LESS 或 SASS 轉換為 CSS。
• 在記憶體中管理檔案操作，並透過使用 Node.js 平臺來提高速度。

優點

• 比任何其他任務執行器都具有巨大的速度優勢
• 易於編寫和理解。
• 易於測試 Web 應用程式。
• 外掛易於使用，並且它們被設計為一次只做一件事。
• 重複執行重複性任務，例如壓縮樣式表、壓縮影像等。

缺點

• 與 Grunt 相比，依賴項數量更多，並且是後來者。
• 使用 Gulp 外掛，您無法執行多個任務。
• 配置不如 Grunt 乾淨。

Gulp - 安裝

本文提供 Gulp 安裝的分步過程。

Gulp 的系統要求

• **作業系統** - 跨平臺

• **瀏覽器支援** - IE（Internet Explorer 8+）、Firefox、Google Chrome、Safari、Opera

Gulp 的安裝

**步驟 1** - 我們需要 Node.js 來執行 Gulp 示例。要下載 Node.js，請開啟 https://nodejs.org/en/，您將看到如下所示的螢幕 -

下載最新版本的 zip 檔案。

**步驟 2** - 接下來，執行安裝程式以在您的計算機上安裝 *NodeJs*。

**步驟 3** - 您需要設定環境變數。

使用者變數路徑

• 右鍵單擊“我的電腦”。
• 選擇“屬性”。
• 選擇“高階”選項卡，然後單擊“環境變數”。

• 在“環境變數”視窗下，雙擊“PATH”，如下圖所示。

• 您將獲得一個“編輯使用者變數”視窗，如下圖所示。在“變數值”欄位中新增 Node.js 資料夾路徑，例如 C:\Program Files\nodejs\node_modules\npm。如果已為其他檔案設定路徑，則需要在其後新增分號 (;) 並新增 Node.js 路徑，如下圖所示。

最後，單擊“確定”按鈕。

系統變數

• 在系統變數下，雙擊“Path”，如下圖所示。

• 您將獲得一個“編輯系統變數”視窗，如下圖所示。在“變數值”欄位中新增 Node.js 資料夾路徑，例如 *C:\Program Files\nodejs\*，然後單擊“確定”，如下圖所示。

**步驟 4** - 在您的系統中開啟命令提示符並輸入以下命令。它將顯示已安裝的 Node.js 版本。

node -v

**步驟 5** - 在命令提示符下，輸入以下命令以顯示 npm（Node.js 包管理器）的版本，該管理器用於安裝模組。它將顯示已安裝的 Node.js 版本。

npm -v

**步驟 6** - 在命令提示符下，輸入以下命令以安裝 Gulp。新增“-g”標誌可確保 Gulp 可用於任何專案。

npm install gulp -g

**步驟 7** - 若要驗證 Gulp 是否已成功安裝，請輸入以下命令以顯示 Gulp 版本。

gulp -v

Gulp - 基礎

在本章中，您將瞭解與 Gulp 相關的基礎知識。

什麼是構建系統？

構建系統是指任務集合（統稱為 **任務執行器**），它們可以自動化重複性工作。

以下是可以使用構建系統處理的一些任務的列表：

• 編譯預處理 CSS 和 JavaScript。
• 壓縮檔案以減小其大小。
• 將檔案連線到一個檔案中。
• 觸發伺服器以自動重新載入。
• 建立部署版本以將結果檔案儲存在一個位置。

在現代前端工作流程中，構建系統與 3 個元件一起工作：

• 包管理器
• 預處理器
• 任務執行器和構建工具

包管理器

它用於自動化安裝、升級、刪除開發環境中使用的必需依賴項、清理庫和包。包管理器的示例包括 **bower** 和 **npm**。

預處理器

預處理器透過新增最佳化的語法和附加功能（這些功能編譯成其本機語言）來提高現代工作流程的效率，非常有用。

一些流行的預處理器包括：

• **CSS** - SASS、LESS 和 Stylus。

• **JS** - CoffeeScript、LiveScript、TypeScript 等。

• **HTML** - Markdown、Haml、Slim、Jade 等。

任務執行器

任務執行器自動化諸如 SASS 到 CSS 的轉換、壓縮檔案、最佳化影像以及開發工作流程中使用的許多其他任務。Gulp 是現代前端工作環境中的任務執行器之一，它執行在 Node 上。

設定您的專案

要在您的計算機上設定您的專案，例如建立一個名為“work”的資料夾。“work”資料夾包含以下子資料夾和檔案：

• **Src** - 預處理的 HTML 原始檔和資料夾的位置。

  • **Images** - 包含未壓縮的影像。

  • **Scripts** - 包含多個預處理的指令碼檔案。

  • **Styles** - 包含多個預處理的 CSS 檔案。

• **Build** - 此資料夾將自動建立，其中包含生產檔案。

  • **Images** - 包含壓縮的影像。

  • **Scripts** - 包含壓縮程式碼的單個指令碼檔案。

  • **Styles** - 包含壓縮程式碼的單個 CSS 檔案。

• **gulpfile.js** - 這是配置檔案，用於定義我們的任務。

Gulp - 開發應用程式

在前面的章節中，您已經學習了 Gulp 安裝 和 Gulp 基礎，其中包括 Gulp 的構建系統、包管理器、任務執行器、Gulp 的結構等。

在本章中，我們將瞭解開發應用程式的基礎知識，包括以下內容：

• 宣告所需的依賴項
• 為依賴項建立任務
• 執行任務
• 監視任務

依賴項宣告

安裝應用程式的外掛時，需要為外掛指定依賴項。依賴項由包管理器（例如 bower 和 npm）處理。

讓我們以名為 **gulp-imagemin** 的外掛為例，在配置檔案中定義其依賴項。可以使用以下命令列安裝此外掛，該外掛可用於壓縮影像檔案：

npm install gulp-imagemin --save-dev

您可以將依賴項新增到您的配置檔案中，如下面的程式碼所示。

var imagemin = require('gulp-imagemin');

以上一行包含外掛，並將其包含為名為 **imagemin** 的物件。

為依賴項建立任務

任務使配置 Gulp 能夠採用模組化方法。我們需要為每個依賴項建立一個任務，隨著我們找到並安裝其他外掛，我們將把它們加起來。Gulp 任務將具有以下結構：

gulp.task('task-name', function() {
   //do stuff here
});

其中“task-name”是字串名稱，“function()”執行您的任務。“gulp.task”將函式註冊為名稱內的任務，並指定對其他任務的依賴關係。

您可以為上面定義的依賴項建立任務，如下面的程式碼所示。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

影像位於 **_src/images/**/*_ 中，該位置儲存在 img_srcobject 中。它被傳遞到 imagemin 建構函式建立的其他函式。它壓縮來自 src 資料夾的影像，並透過使用表示目標目錄的引數呼叫 **dest** 方法將其複製到 build 資料夾。

執行任務

Gulp 檔案已設定好並準備執行。在您的專案目錄中使用以下命令執行任務：

gulp imagemin

使用以上命令執行任務時，您將在命令提示符中看到以下結果：

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Gulp - 組合任務

任務使配置 Gulp 能夠採用模組化方法。我們需要為每個依賴項建立一個任務，隨著我們找到並安裝其他外掛，我們將把它們加起來。Gulp 任務將具有以下結構：

gulp.task('task-name', function() {
   //do stuff here
});

其中“task-name”是字串名稱，“function()”執行您的任務。“gulp.task”將函式註冊為名稱內的任務，並指定對其他任務的依賴關係。

安裝外掛

讓我們以名為 **minify-css** 的外掛為例，合併和壓縮所有 CSS 指令碼。可以使用 npm 安裝它，如下面的命令所示：

npm install gulp-minify-css --save-dev

要使用“gulp-minify-css 外掛”，您需要安裝另一個名為“gulp-autoprefixer”的外掛，如下面的命令所示：

npm install gulp-autoprefixer --save-dev

要連線 CSS 檔案，請安裝 gulp-concat，如下面的命令所示：

npm install gulp-concat --save-dev

安裝外掛後，需要在配置檔案中編寫依賴項，如下所示：

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

向 Gulp 檔案新增任務

我們需要為每個依賴項建立一個任務，隨著我們安裝外掛，我們將把它們加起來。Gulp 任務將具有以下結構：

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

“concat”外掛連線 CSS 檔案，“autoprefix”外掛指示所有瀏覽器的當前版本和先前版本。它壓縮來自 src 資料夾的所有 CSS 指令碼，並透過使用表示目標目錄的引數呼叫“dest”方法將其複製到 build 資料夾。

要執行任務，請在您的專案目錄中使用以下命令：

gulp styles

同樣，我們將使用另一個名為“gulp-imagemin”的外掛來壓縮影像檔案，可以使用以下命令安裝：

npm install gulp-imagemin --save-dev

您可以使用以下命令將依賴項新增到您的配置檔案中：

var imagemin = require('gulp-imagemin');

您可以為上面定義的依賴項建立任務，如下面的程式碼所示。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

影像位於“src/images/**/*”，並儲存在img_srcobject中。它被傳遞到由'imagemin'建構函式建立的其他函式中。它壓縮src資料夾中的影像，並透過呼叫帶有目標目錄引數的'dest'方法複製到build資料夾。

要執行任務，請在您的專案目錄中使用以下命令：

gulp imagemin

組合多個任務

您可以透過在配置檔案中建立預設任務來同時執行多個任務，如下面的程式碼所示：

gulp.task('default', ['imagemin', 'styles'], function() {

});

Gulp檔案已設定完畢，可以執行。在您的專案目錄中執行以下命令來執行上述組合任務：

gulp

使用上述命令執行任務後，您將在命令提示符中獲得以下結果：

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

Gulp - 監聽

Watch方法用於監視您的原始檔。對原始檔進行任何更改時，watch將執行相應的任務。您可以使用'default'任務來監視HTML、CSS和JavaScript檔案的更改。

更新預設任務

在上一章中，您學習瞭如何使用預設任務組合Gulp任務。我們使用了gulp-minify-css、gulp-autoprefixer和gulp-concat外掛，並建立了styles任務來壓縮CSS檔案。

要監視CSS檔案，我們需要更新'default'任務，如下面的程式碼所示

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

work/src/styles/資料夾下的所有CSS檔案都將被監視，並且對這些檔案進行更改後，將執行styles任務。

執行預設任務

使用以下命令執行'default'任務。

gulp

執行上述命令後，您將收到以下輸出。

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

每當對CSS檔案進行任何更改時，您將收到以下輸出。

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

Watch程序將保持活動狀態並響應您的更改。您可以按Ctrl+C終止監視程序並返回命令列。

Gulp - 即時過載

Live Reload指定檔案系統中的更改。BrowserSync用於監視CSS目錄中的所有HTML和CSS檔案，並在檔案更改時對所有瀏覽器中的頁面執行即時重新載入。BrowserSync透過跨多個裝置同步URL、互動和程式碼更改來加快工作流程。

安裝BrowserSync外掛

BrowserSync外掛提供跨瀏覽器CSS注入，可以使用以下命令安裝。

npm install browser-sync --save-dev

配置BrowserSync外掛

要使用BrowserSync外掛，您需要在配置檔案中編寫依賴項，如下面的命令所示。

var browserSync = require('browser-sync').create();

您需要建立一個任務才能使BrowserSync與使用Gulp的伺服器一起工作。由於您正在執行伺服器，因此您需要告訴BrowserSync您的伺服器的根目錄。在這裡，我們使用'build'作為基目錄。

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

您還可以使用以下CSS檔案的任務將新樣式注入瀏覽器。

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

在建立BrowserSync的任務之前，您需要使用包管理器安裝外掛並在配置檔案中編寫依賴項，如本章節中所定義。

完成配置後，執行BrowserSync和watchTask以實現即時重新載入效果。無需分別執行兩條命令列，我們將透過將browserSynctask與watchTask一起新增，如下面的程式碼所示。

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});   

在您的專案目錄中執行以下命令來執行上述組合任務。

gulp

使用上述命令執行任務後，您將在命令提示符中獲得以下結果。

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: https://:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: https://:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

它將開啟帶有URL https://:3000/的瀏覽器視窗。對CSS檔案所做的任何更改都將反映在命令提示符中，並且瀏覽器將自動重新載入更改後的樣式。

Gulp - 最佳化 CSS 和 JavaScript

在本節中，您將學習如何最佳化CSS和JavaScript。最佳化需要從原始檔中刪除不必要的資料（例如空格和未使用的字元）。它減小了檔案大小，並允許它們更快地載入。

安裝用於最佳化CSS和JavaScript的外掛

從命令列轉到“work”目錄，並使用以下命令安裝“gulp-uglify”、“gulp-minify-css”和“gulp-concat”外掛：

npm install gulp-uglify gulp-minify-css gulp-concat

宣告依賴項並建立任務

在您的配置檔案gulpfile.js中，首先宣告依賴項，如下面的程式碼所示。

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

接下來，您需要建立用於最佳化CSS和JavaScript的任務，如下面的程式碼所示。

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

js任務將接受來自src/scripts/資料夾的.js檔案。它連線並壓縮js檔案，然後生成build/scripts/script.js檔案。

CSS任務將接受來自src/styles/資料夾的.css檔案。它連線並壓縮CSS檔案，然後生成build/styles/styles.css檔案。

執行任務

配置檔案已設定完畢，可以執行。使用以下命令執行任務。

gulp

使用上述命令執行任務後，您將在命令提示符中收到以下結果。

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

Gulp - 最佳化圖片

在本節中，您將學習如何最佳化影像。最佳化將減小影像大小，並有助於更快地載入。

安裝用於最佳化影像的外掛

從命令列轉到“work”目錄，並使用以下命令安裝“gulp-changed”和“gulp-imagemin”外掛。

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

宣告依賴項並建立任務

在您的配置檔案gulpfile.js中，首先宣告依賴項，如下面的命令所示。

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

接下來，您需要建立用於最佳化影像的任務，如下面的程式碼所示。

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

imagemin任務將接受來自src/images/資料夾的png、jpg和gif影像，並在將其寫入目標之前對其進行壓縮。changed()確保每次僅傳遞新檔案進行壓縮。gulp-changed外掛僅處理新檔案，因此可以節省寶貴的時間。

執行任務

配置檔案已設定完畢，可以執行。使用以下命令執行任務。

gulp

使用上述命令執行任務後，您將在命令提示符中收到以下結果。

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp - 有用外掛

Gulp提供了一些有用的外掛來處理HTML&CSS、JavaScript、圖形和其他一些內容，如下表所述。

HTML & CSS外掛

JavaScript外掛

單元測試外掛

圖形外掛

編譯器外掛

其他外掛

Gulp - 清理不需要的檔案

本章將學習如何清理生成的檔案。由於我們自動生成檔案，請確保在執行構建之前刪除不必要的檔案。此過程稱為**清理**。可以使用**del**外掛來實現此目的。

安裝 del 外掛

在命令列中輸入以下命令安裝外掛。

npm install del --save-dev

宣告依賴項並建立任務

在您的配置檔案**gulpfile.js**中，宣告依賴項，如下所示。

var del = require('del');

接下來，建立如下所示的任務。

gulp.task('clean:build', function() {
   return del.sync('build');
});

上述任務將清理整個構建。clean 任務清除所有圖片快取並刪除構建中存在的任何舊檔案。

可以只清理特定檔案或資料夾，而保留其他檔案或資料夾不變，如下所示。

gulp.task('clean:build', function() {
   //return del.sync('build');
   return del([
      'build/temp/',
      // instructs to clean temp folder
      '!build/package.json'
      // negate to instruct not to clean package.json file ]);
});

在上述任務中，只有**temp**資料夾會被清理，而**package.json**則保持不變。