摘要：當(dāng)接收一個(gè)回調(diào)函數(shù)的時(shí)候，一定要注意回調(diào)函數(shù)中的參數(shù)。主要作用就是用來讀取文件或者文件夾中的數(shù)據(jù)。表示文件的名稱指的是發(fā)生的變化使用技巧的進(jìn)一步使用，可以參照中文官網(wǎng)中的技巧集。

Gulp 對(duì)現(xiàn)在的前端而言，是一個(gè)稍微老舊的工具了，但是，為了復(fù)習(xí)以前學(xué)過的內(nèi)容，還是把它翻出來，放在自己的博客中。說不定哪天又用到了呢。

需要說明的是，這里使用的 Gulp 版本是 3.9.1。

Gulp 是基于 Nodejs 的任務(wù)運(yùn)行器，主要作用就是對(duì)代碼進(jìn)行構(gòu)建打包。說白了，就是將源代碼通過 Gulp 中流的操作，生成目標(biāo)代碼。

Gulp 借鑒了 Unix 操作系統(tǒng)中的管道思想，前一級(jí)的輸出作為后一級(jí)的輸入，所有的操作都是通過 Nodejs 流的形式來進(jìn)行操作。這種思想使操作變得簡(jiǎn)單，為后續(xù)的任務(wù)編寫打下基礎(chǔ)。

學(xué)習(xí)任何一門技術(shù)之前，首先要知道它的官網(wǎng)，Gulp 也不例外。在這里把中文官網(wǎng)和英文官網(wǎng)一并放在下面，當(dāng)然，最好是看英文官網(wǎng)，所以把英文官網(wǎng)放在了最上面。

英文官網(wǎng)

中文官網(wǎng)

當(dāng)然，該項(xiàng)目的 GitHub 地址也是需要知道在哪個(gè)地方的，這樣方便查看源碼。閑著沒事的時(shí)候，也可以看看源碼實(shí)現(xiàn)，提高一下自己的技術(shù)水平。

GitHub 地址

在網(wǎng)上搜集 Gulp 相關(guān)教程的時(shí)候，發(fā)現(xiàn)了一個(gè)很好的網(wǎng)站，上面有一系列關(guān)于 Gulp 的文章。這個(gè)網(wǎng)站中講解 Gulp 還是比較詳細(xì)的。可以按照該網(wǎng)站中給出的教程，逐個(gè)學(xué)習(xí)。

Gulp教程

Gulp 的安裝依賴 Nodejs。在安裝 Gulp 之前，一定要確保已經(jīng)安裝了 Nodejs。關(guān)于 Nodejs 的安裝過程，可以參照 安裝 Nodejs。

全局安裝 :

如果需要全局使用 Gulp，可以使用全局安裝。

$ npm install -g gulp-cli

全局安裝，可以在終端中使用下面的命令查看當(dāng)前的 Gulp 版本 :

$ gulp -v
[16:10:17] CLI version 1.4.0

通過全局安裝的方式，在存在 gulpfile.js 的地方，都可以使用 gulp 命令來執(zhí)行任務(wù)。

# 如 gulpfile.js 中存在一個(gè) default 的命令，就可以通過下面的方式執(zhí)行
$ gulp

項(xiàng)目依賴安裝 :

這個(gè)時(shí)候安裝的 Gulp 是在 package.json 中的 devDependencies 節(jié)點(diǎn)下的，因?yàn)?Gulp 是項(xiàng)目開發(fā)時(shí)使用的模塊，不是生產(chǎn)時(shí)使用的模塊。

在安裝的時(shí)候，可以選擇使用 npm 的方式安裝，這種安裝方式最常見，但是一般安裝速度比較慢。

# 使用 npm 安裝
$ npm install --save-dev gulp

當(dāng)然，也可以選擇使用 yarn 的方式進(jìn)行安裝，這種方式安裝比較快速，但是需要安裝 yarn。

# 使用 yarn 安裝
$ yarn add gulp -D

通過項(xiàng)目依賴來安裝的 Gulp，必須在項(xiàng)目的根目錄下執(zhí)行，且根目錄中必須存在 gulpfile.js，執(zhí)行 Gulp 任務(wù)的時(shí)候，需要使用 Gulp 工具在當(dāng)前項(xiàng)目目錄中的相對(duì)路徑來調(diào)用。

# 如 gulpfile.js 中存在一個(gè) default 的命令，就可以通過下面的方式執(zhí)行
$ ./node_modules/.bin/gulp

一般情況下，不推薦使用全局的方式來安裝 Gulp。推薦使用項(xiàng)目依賴來安裝，然后再結(jié)合 package.json 來使用。

首先要通過安裝項(xiàng)目依賴的方式來安裝 Gulp :

$ yarn add gulp -D

由于通過 Gulp 來執(zhí)行任務(wù)，首先需要有一個(gè) gulpfile.js 文件，因此，在執(zhí)行任務(wù)之前，要?jiǎng)?chuàng)建 gulpfile.js 文件。文件創(chuàng)建完成之后，創(chuàng)建兩個(gè)任務(wù)。

// 在文件中一定要引入的模塊
var gulp = require("gulp");

// 將你的默認(rèn)的任務(wù)代碼放在這
gulp.task("default", function() {
  console.log("default task ...");
});

// 自定義名稱的任務(wù)
gulp.task("demo",function(){
  console.log("demo task ...");
});

任務(wù)創(chuàng)建完成之后，下面就是通過 Gulp 來執(zhí)行任務(wù)了。執(zhí)行任務(wù)之前，首先明白不同的任務(wù)。對(duì)于 Gulp 而言，本身存在一個(gè)名字為 default 的任務(wù)，這個(gè)任務(wù)名在 Gulp 中已經(jīng)內(nèi)置了。除了 default 之外，其余所有的任務(wù)都是自定定義的任務(wù)，也就是說，除了 default 之外，任務(wù)名可以自定義。

在上面的代碼中定義了兩個(gè)任務(wù)，其中 default 是默認(rèn)任務(wù)，執(zhí)行的時(shí)候比較方便，在 gulp 命令之后，不需要跟任何參數(shù)。

$ ./node_modules/.bin/gulp

[14:50:11] Using gulpfile ~/Desktop/es/gulpfile.js
[14:50:11] Starting "default"...
default task ...
[14:50:11] Finished "default" after 187 μs

但是，自定義的任務(wù)執(zhí)行的時(shí)候，要在 Gulp 命令后跟上一個(gè)參數(shù)，這個(gè)參數(shù)是任務(wù)的名字。

$ ./node_modules/.bin/gulp demo

[14:50:16] Using gulpfile ~/Desktop/es/gulpfile.js
[14:50:16] Starting "demo"...
demo task ...
[14:50:16] Finished "demo" after 1.35 ms

輸出的日志中，會(huì)把任務(wù)開始的時(shí)間以及結(jié)束的時(shí)間打印出來，開始時(shí)間和結(jié)束時(shí)間之間就是任務(wù)執(zhí)行的過程。從某方面來講，這種輸出的日志類似 HTML 中的標(biāo)簽，存在開始標(biāo)簽和結(jié)束標(biāo)簽。當(dāng)然，這只是一種類比。

需要補(bǔ)充的一點(diǎn) : 如果需要使用 babel 來轉(zhuǎn)換 js 文件，為了能使 babel 的配置文件能夠正常讀取，一般會(huì)把 gulpfile.js 重新命名為 gulpfile.babel.js，這樣就可以在 gulpfile.babel.js 中使用 ES6 的最新語法了。

Gulp 的 API 設(shè)計(jì)也比較簡(jiǎn)單，總共只有四個(gè) gulp.src gulp.dest gulp.task gulp.watch。很少的 API，極大程度上縮減了記憶的成本，但是需要自己配置的內(nèi)容相對(duì)而言就多了。

gulp.task 主要是用來定義任務(wù)的。

/**
 * 作用 : 定義一個(gè)任務(wù)
 * @param {String} name 任務(wù)的名字，不要在任務(wù)名字中出現(xiàn)空格
 * @param {Array} deps 可選參數(shù)，任務(wù)列表的數(shù)組，是當(dāng)前任務(wù)執(zhí)行前的依賴任務(wù)，數(shù)組的元素是任務(wù)名
 * @param {Function} fn 定義任務(wù)所要執(zhí)行的一些操作
 */
gulp.task(name[, deps], fn)

對(duì)于第三個(gè)參數(shù)，需要說明一下。第三個(gè)參數(shù)可以接收一個(gè)回調(diào)函數(shù)，也可以返回一個(gè) stream。

當(dāng)接收一個(gè)回調(diào)函數(shù)的時(shí)候，一定要注意回調(diào)函數(shù)中的參數(shù)。

gulp.task("mytask", function (cb) {
  if (true) {
    cb(null); // 當(dāng)回調(diào)函數(shù)的參數(shù)是 null 的時(shí)候，說明不會(huì)存在錯(cuò)誤
  } else {
    cb("存在錯(cuò)誤"); // 當(dāng)回調(diào)函數(shù)的參數(shù)不是 null 的時(shí)候，這個(gè)時(shí)候就是產(chǎn)生了錯(cuò)誤
  }
});

返回一個(gè) stream 流的時(shí)候，一般是通過 gulp 的 API 來獲取的。

gulp.task("mytask", function() {
  var stream = gulp.src("client/**/*.js")
    .pipe(gulp.dest("build"));
  return stream;
});

gulp.src 主要作用就是用來讀取文件或者文件夾中的數(shù)據(jù)。

/**
 * 作用 : 讀取數(shù)據(jù)并返回一個(gè)流
 * @param {String | Array} globs 參數(shù)是文件或者文件夾，支持相對(duì)路徑
 * @param {Object} options 可選參數(shù)，任務(wù)列表的數(shù)組，是當(dāng)前任務(wù)執(zhí)行前的依賴任務(wù)，數(shù)組的元素是任務(wù)名
 */
gulp.src(globs[, options])

其中 globs 的參數(shù)是 node-glob 模塊 的參數(shù)。詳細(xì)參數(shù)可以到官網(wǎng)查看這個(gè)模塊，這里只說明幾個(gè)特殊的匹配。

** 用于匹配文件夾，表示 0 個(gè)或者多個(gè)層級(jí)的目錄

* 用于匹配文件名，表示 0 個(gè)或者多個(gè)字符

! 排除符合規(guī)則的文件，! 一定要放在匹配規(guī)則之前

如果要匹配 src 目錄下的所有 .js 文件，且排除 src 目錄下的所有以下劃線開頭的 .js 文件，就可以寫成下面的形式 :

gulp.src(["./src/**/*.js", "!./src/**/_*.js"])

使用 options.base 可以修改文件的目標(biāo)路徑。在沒有指定該參數(shù)的時(shí)候，目標(biāo)路徑是第一個(gè)匹配符之前的路徑。

gulp.task("default", function () {
  // 這個(gè)時(shí)候會(huì)把 ./src/one 替換成 ./build，也可以理解成此時(shí)的 options.base 為 ./src/one
  // 最終 .js 文件所在的路徑就是 ./build/*.js
  return gulp.src(["./src/one/*.js"])
    .pipe(gulp.dest("./build"));
});

如果指定了 options.base 參數(shù)，那么最終文件所在的路徑就會(huì)發(fā)生變化。

gulp.task("default", function () {
  // 最終 .js 會(huì)被拷貝到 ./build/one/*.js 中
  return gulp.src(["./src/one/*.js"], {
      base: "src"
    })
    .pipe(gulp.dest("./build"));
});

gulp.dest 用來指定文件最終被寫入的路徑。

/**
 * 作用 : 讀取數(shù)據(jù)并返回一個(gè)流
 * @param {String} path 文件的目標(biāo)路徑，這個(gè)只能指定文件夾，不能指定文件
 * @param {Object} options 可選參數(shù)，一般很少使用，這里不再說明
 */
gulp.dest(path[, options])

gulp.dest 的簡(jiǎn)單使用實(shí)例。

gulp.task("default", function () {
  return gulp.src("./src*.js").pipe(gulp.dest("./build"));
});

gulp.watch 用于監(jiān)視文件變化，發(fā)現(xiàn)文件變化，則觸發(fā)某個(gè)操作。

/**
 * 作用 : 監(jiān)視文件變化，發(fā)現(xiàn)文件變化，則觸發(fā)某個(gè)操作
 * @param {String | Array} glob 一般是匹配文件
 * @param {Object} opts 可選參數(shù)，一般很少使用，這里不再說明
 * @param {Array} tasks 數(shù)組的參數(shù)是任務(wù)的名稱，表示文件變化觸發(fā)一個(gè)或多個(gè)任務(wù)
 */
gulp.watch(glob [, opts], tasks)

咱們現(xiàn)在看一個(gè)簡(jiǎn)單的例子，.js 文件發(fā)生變化的時(shí)候，執(zhí)行任務(wù) one。

gulp.task("one", function () {
  console.log("one...");
});

gulp.task("default", function () {
  console.log("default ...");
});

gulp.watch("src/**/*.js", ["one"]);

現(xiàn)在有一個(gè)需求，當(dāng)某個(gè) .js 文件發(fā)生變化的時(shí)候，需要獲取是哪個(gè)文件發(fā)生了變化，那么就需要增加監(jiān)聽。

gulp.task("one", function () {
  console.log("one...");
});

gulp.task("default", function () {
  console.log("default ...");
});

gulp.watch("src/**/*.js", ["one"]).on("change", function(event) {
  // event.path 表示文件的名稱
  // event.type 指的是發(fā)生的變化
  console.log("File " + event.path + " was " + event.type + ", running tasks...");
});

Gulp 的進(jìn)一步使用，可以參照中文官網(wǎng)中的 gulp 技巧集。