Home >> Blog >> 什麼是 Gulp？如何使用 Gulp？
什麼是 Gulp？如何使用 Gulp？
Gulp 是開源社群的另一個工具，用於自動化 Web 開發中的重複性任務。雖然 bower、npm（節點包管理器）等工具可以幫助我們在應用程序中下載和配置可重用的包，但 Gulp 可以幫助我們自動化許多耗時的重複性客戶端任務。
這些任務包括捆綁和縮小腳本和样式表、將 less 或 sass 編譯為 css 樣式、將文件部署到服務器、圖像壓縮等。所以，簡單來說，Gulp 是一個任務運行工具，而 Bower、npm 等工具是包管理器.
Gulp 建立在 Node.js 之上，它已經擁有一個強大的社群，可以構建各種插件來執行各種任務。目前有超過 3000 多個插件可用，這使得我們能想到的幾乎所有可能的任務都可以自動化。gulp 任務寫入名為 gulpfile.js 的 javascript 文件中，該文件將由 Gulp 工具執行。
安裝 Gulp
Gulp 可以使用 npm（節點包管理器）工具在機器範圍內或本地安裝到應用程序。作為先決條件，Gulp 需要先安裝 Node.js。從這裡下載並安裝 Node.js。安裝 Node.js 也會安裝 npm 包管理器。
安裝後，您可以通過在命令提示符 下執行node -v和npm -v命令來驗證安裝。此命令將輸出相應安裝的版本，如下所示。
要在機器範圍內（全局）安裝 Gulp，請打開命令提示符並鍵入以下命令並輸入。
npm install gulp-cli -g
-g 代表全局安裝。這將在機器中全局下載並安裝 Gulp。參考下文，
安裝後，驗證 Gulp 安裝和版本，
C:\QuickStart\GulpDemo>gulp -v
[20:41:32] CLI 版本 1.3.0
使用 Gulp
讓我們嘗試使用 gulp 自動化 2 個簡單的任務，從 html 文件中刪除空格和縮小 JavaScript 文件。最後，我們將使用 gulp 將生成的文件複製到構建文件夾中。假設我們的應用程序位於文件夾 C:\QuickStart\GulpDemo 下。我們將不使用全局安裝的 Gulp，而是將本地版本的 gulp 安裝到應用程序文件夾中並使用它。
為此，請在命令提示符中訪問應用程序文件夾並將應用程序配置為使用 npm 包管理器。這是因為，Gulp 是使用 npm 安裝的。輸入npm init命令並回車創建 package.json 文件。這將詢問有關應用程序的一系列基本問題，最後在應用程序根文件夾下創建一個 package.json 文件。該文件將存儲應用程序的 npm 包依賴項。您可以將此步驟等同於擁有一個 package.config 文件，用於在 Visual Studio 項目中存儲 nuget 包依賴項。參考下文，
創建的 package.json 看起來像，
{
"name": "gulpdemo",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
npm 的 package.json 類似於 Nuget 用來存儲應用程序依賴項的 package.config。通過本地安裝 Gulp，當應用程序從版本控制中獲得最新版本時，它將在本地配置應用程序及其所有依賴項，而不是使用全局安裝。
接下來，讓我們在本地安裝 Gulp，
npm install gulp --save-dev
這將下載 gulp 並將其本地安裝到根文件夾下名為 node_modules 的文件夾中。–save-dev 開關將 Gulp 保存為 package.json 中的開發依賴項。所以，我們現在已經完成了所有基本設置，可以在我們的應用程序中使用本地安裝的 Gulp。
添加 HTML 任務
我們現在將獲得一個 gulp 插件，它可以幫助我們刪除 html 文件中的空白。用於此任務的插件是 gulp-htmlclean，安裝命令是，
npm install gulp-htmlclean --save-dev
在應用程序根文件夾下，我們將在 src 文件夾中有未清理的 html 文件。我們現在將創建 gulp 任務來清理這些文件並將其移動到根目錄下名為 build 的目標文件夾。
Gulp 工具要求將所有任務寫入一個名為 gulpfile.js 的 javascript 文件。首先，讓我們在應用根目錄下創建一個名為 gulpfile.js 的新 javascript 文件。清理文件和移動到目的地的 gulp 任務如下。
gulpfile.js
var gulp = require('gulp'), htmlclean = require('gulp-htmlclean');
var 文件夾 = {
src: 'src/',
構建：'構建/'
};
gulp.task('html', function() {
var out = folder.build + 'html/';
返回 gulp.src(folder.src + 'html/**/*')
.pipe(htmlclean())
.pipe(gulp.dest(out));
});
在了解上面的代碼之前，我們先來了解一下我們將用來創建任務的 gulp api。Gulp 主要公開了 4 種方法來構建任務。他們是，
1.吞嚥任務
.有助於創建新任務。
2.吞嚥.src
.從指定文件夾讀取文件
3.gulp.dest
. 將處理後的文件寫入指定的目標文件夾
4. gulp.watch
.監視或監視指定的源並在源中發生任何更改時調用任務。
還有另一種稱為readable.pipe()的方法，它實際上鍊接了上述 gulp 方法來執行任務。Gulp 實際上與 Streams 一起工作，即 gulp.src() 方法從源讀取文件作為 Stream 並通過 pipe() 方法將其傳遞給 gulp 插件以執行任務。因此， pipe() 方法從 gulp.src() 讀取流，執行插件任務並通過 gulp.dest() 將其傳遞到目標流以將其寫入目標。
回到 gulpfile.js 中的腳本，它創建名為 html 的任務，該任務從 src/html 文件夾中讀取 html 文件，並通過 htmlclean() 插件將其通過管道傳輸，並將輸出文件寫入 build/html 文件夾。頂部的 require() 方法包括用於創建任務的 gulp 和 gulp-htmlclean() 插件。保存此文件並從命令提示符執行任務，如下所示。命令語法是gulp [taskname]。見下文，
C:\QuickStart\GulpDemo>gulp html
[22:15:22] Using gulpfile C:\QuickStart\GulpDemo\gulpfile.js
[22:15:22] Starting 'html'...
[22:15:22] Finished 'html' after 147 ms
這將刪除源 html 文件中的空格並將輸出 html 文件複製到 build/html 文件夾中。
添加 JavaScript 縮小任務
要縮小 Javascript 文件，請將 uglify gulp 插件添加到我們的項目中。
npm install gulp-uglify --save-dev
類似於 html 文件，讓我們在 src 文件夾下有我們開發版本的 javascript 文件。
更新 gulpfile.js 以包含新任務以縮小 JavaScript 文件並將其複製到目標。此外，在 include 語句中包含 gulp-uglify 插件。下面的任務，
var gulp = require('gulp'),htmlclean = require('gulp-htmlclean'),uglify = require('gulp-uglify');
var folders = {
src: 'src/',
build: 'build/'
};
gulp.task('html', function() {
var out = folders.build + 'html/';
return gulp.src(folder.src + 'html/**/*')
.pipe(htmlclean())
.pipe(gulp.dest(out));
});
gulp.task('js',['html'], function() {
return gulp.src(folders.src + 'js/**/*')
.pipe(uglify())
.pipe(gulp.dest(folders.build + 'js/'));
新任務“js”將html任務作為依賴任務並使其首先執行。要執行任務，請轉到命令提示符並執行gulp js
C:\QuickStart\GulpDemo>gulp js
[22:22:52] Using gulpfile C:\QuickStart\GulpDemo\gulpfile.js
[22:22:52] Starting 'html'...
[22:22:52] Finished 'html' after 306 ms
[22:22:52] Starting 'js'...
[22:22:54] Finished 'js' after 2.21 s
創建默認任務
當我們從命令提示符發出命令gulp 時，我們可以在 gulpfile.js 中創建一個默認任務來運行項目中的所有任務。
gulp.task('default', ['js']);
執行所有任務
現在，輸入gulp和 enter 將運行我們項目中 gulpfile.js 中的所有任務。
C:\QuickStart\GulpDemo>gulp
[22:26:05] Using gulpfile C:\QuickStart\GulpDemo\gulpfile.js
[22:26:05] Starting 'html'...
[22:26:05] Finished 'html' after 137 ms
[22:26:05] Starting 'js'...
[22:26:07] Finished 'js' after 2.24 s
[22:26:07] Starting 'default'...
[22:26:07] Finished 'default' after 48 µs
執行後，您可以看到放置在 build 文件夾下的輸出文件。
最終的 gulpfile.js 是，
var gulp = require('gulp'),htmlclean = require('gulp-htmlclean'),uglify = require('gulp-uglify');
var folders = {
src: 'src/',
build: 'build/'
};
gulp.task('html', function() {
var out = folders.build + 'html/';
return gulp.src(folder.src + 'html/**/*')
.pipe(htmlclean())
.pipe(gulp.dest(out));
});
gulp.task('js',['html'], function() {
return gulp.src(folders.src + 'js/**/*')
.pipe(uglify())
.pipe(gulp.dest(folders.build + 'js/'));
});
gulp.task('default', ['js']);