摘要：簡(jiǎn)而言之，任何符合匹配規(guī)則的文件發(fā)生改變就會(huì)運(yùn)行任務(wù)列表中的任務(wù)。第二種形式的參數(shù)是一個(gè)匹配規(guī)則，可選的選項(xiàng)對(duì)象，和一個(gè)可選的回調(diào)函數(shù)。當(dāng)事件發(fā)生時(shí)會(huì)運(yùn)行該回調(diào)函數(shù)。它獲取任何或其子目錄下的文件，因此，同樣會(huì)應(yīng)用于該任務(wù)。

原文地址： https://scotch.io/tutorials/a...
源碼Github地址：https://github.com/scotch-io/...

前端的世界越來(lái)越豐富，各種新鮮工具層出不窮。然而，人生卻還是越來(lái)越寂寞。年紀(jì)越小的時(shí)候，越容易交到朋友，或者說(shuō)越容易玩到一起。到了現(xiàn)在，往往是路不同不相謀，表面酒肉知己。如今webpack可以說(shuō)是非常火熱的構(gòu)建工具，gulp的許多功能它都可以完成。不過(guò)，還是有很多場(chǎng)景使用Gulp即可完成。所以，技術(shù)要選合適的，路要走自己的。

作為開發(fā)人員，我們經(jīng)常需要查看我們所使用的工具，并決定該工具是否適合當(dāng)前工作。Chris在去年寫了一個(gè)很棒的工具 —— Grunt 。但是Grunt并不一定是你的最佳選擇。

Gulp 是一個(gè)流式構(gòu)建系統(tǒng)，通過(guò)使用node流將文件操作全部在內(nèi)存中完成，而且文件在接受到您的命令前不會(huì)寫入。

像Grunt一樣，Gulp是一個(gè)javascript任務(wù)運(yùn)行器（task runner）。然而，Gulp更喜歡代碼配置。由于您的任務(wù)在代碼中編寫，所以Gulp更像是一個(gè)構(gòu)建框架（build framework），提供了一個(gè)根據(jù)特定需求創(chuàng)建任務(wù)的工具。

Gulp的安裝和運(yùn)行非常簡(jiǎn)單，只需要如下步驟：

全局安裝

作為開發(fā)依賴安裝

創(chuàng)建一個(gè)gulpfile.js文件

第一步，全局安裝Gulp。

$ npm install --global gulp

然后，您需要將gulp設(shè)為項(xiàng)目的開發(fā)依賴模塊。確保您已經(jīng)有package.json文件或者命令行運(yùn)行npm init，然后就可以用下面的命令將其安裝為項(xiàng)目開發(fā)依賴模塊：

$ npm install --save-dev gulp

最后，您需要在項(xiàng)目的根目錄創(chuàng)建gulpfile.js文件，其中包含著你的任務(wù)。作為中間步驟，我們將添加gulp util插件，以便我們有一個(gè)可以顯示執(zhí)行情況的可運(yùn)行任務(wù)。

$ npm install --save-dev gulp-util

在剛才創(chuàng)建的gulpfile.js中，我們將寫一個(gè)非常簡(jiǎn)單的任務(wù)來(lái)打印一行字符串。

/* File: gulpfile.js */

// grab our gulp packages
var gulp = require("gulp");
var gutil = require("gulp-util");

// create a default task and just log a message
gulp.task("default", function () {
  return gutil.log("Gulp is running");
});

現(xiàn)在執(zhí)行gulp命令，如果一切正常的話，將會(huì)有如下的輸出：

> gulp
[12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js
[12:32:08] Starting "default"...
[12:32:08] Gulp is running!
[12:32:08] Finished "default" after 1 ms

我們可能需要先花一些時(shí)間定義一下項(xiàng)目結(jié)構(gòu)。在此示例中，我們將使用下面的結(jié)構(gòu)，你可以先將文件內(nèi)容空著。

public/
  |  assets/
  |  |  stylesheets/
  |  |  |  style.css
  |  |  javascript/
  |  |  |  vendor/
  |  |  |  |  jquery.min.js
  |  |  |  bundle.js 
source/
  |  javascript/
  |  |  courage.js
  |  |  wisdom.js
  |  |  power.js
  |  scss/
  |  |  styles.scss
  |  |  grid.scss
gulpfile.js
packages.json

source是我們的工作目錄。assets/style.css會(huì)在我們使用gulp處理和組合source/scss中的SASS文件時(shí)創(chuàng)建。bundle.js文件會(huì)在我們使用gulp壓縮和組合JS文件時(shí)創(chuàng)建。

Gulp是一個(gè)流式構(gòu)建系統(tǒng)。它的流特性允許它管理和傳遞被操作的數(shù)據(jù)或插件使用的數(shù)據(jù)。插件旨在每次只做一個(gè)工作，所以通過(guò)一個(gè)多個(gè)插件傳遞一個(gè)單一的文件并不罕見。

gulp的api非常簡(jiǎn)潔輕量，包含4個(gè)頂級(jí)函數(shù)。如下所示：

gulp.task

gulp.src

gulp.dest

gulp.watch

gulp.task方法定義你的任務(wù)。它的參數(shù)是name，deps和fn。

name是一個(gè)字符串，deps是一個(gè)包含任務(wù)名稱的數(shù)組，fn是執(zhí)行任務(wù)的一個(gè)函數(shù)。deps是可選的，所以gulp.task有兩種形式：

gulp.task("mytask", function () {
  // do stuff
});

gulp.task("dependenttask", ["task"], function () {
  // do stuff after "mytask" is done
})

gulp.src指向我們要使用的文件。它的參數(shù)是一個(gè)匹配規(guī)則和一個(gè)可選的選項(xiàng)對(duì)象。它使用.pipe方法將其輸出鏈接到其他插件。

gulp.dest指向我們想要文件輸出的位置。

我們可以使用gulp.src和gulp.dest進(jìn)行簡(jiǎn)單的文件復(fù)制操作：

gulp.task("copyHtml", function () {
  // copy any html files in source/ to public/
  gulp.src("source/*.html").pipe(gulp(.dest("public")));
});

gulp.watch像gulp.task一樣有兩種形式。它們都返回一個(gè)EventEmitter并觸發(fā)change事件。第一種形式的參數(shù)是一個(gè)匹配規(guī)則，一個(gè)可選的選項(xiàng)對(duì)象，和一個(gè)任務(wù)數(shù)組。

gulp.watch("source/javascript/**/*.js", ["jshint"]);

簡(jiǎn)而言之，任何符合匹配規(guī)則的文件發(fā)生改變就會(huì)運(yùn)行任務(wù)列表中的任務(wù)。如上面的代碼，只要任何source/javascript子文件夾下的.js文件發(fā)生了改變，就會(huì)對(duì)這些文件運(yùn)行jshint任務(wù)。

第二種形式的參數(shù)是一個(gè)匹配規(guī)則，可選的選項(xiàng)對(duì)象，和一個(gè)可選的回調(diào)函數(shù)。當(dāng)change事件發(fā)生時(shí)會(huì)運(yùn)行該回調(diào)函數(shù)。

你可以將它與Grunt比較，Grunt需要安裝其他的包才能實(shí)現(xiàn)watch功能。而Gulp原生支持。

更多Gulp的資料請(qǐng)參考api docs。

Being able to tell us that it is running is a fine task, but lets get gulp to do some real tasks for us.

We"ll start with simple tasks and work our way up.

我們的第一個(gè)任務(wù)是使用jshint檢查javascript代碼，我們將會(huì)設(shè)置在每次保存javascript文件時(shí)運(yùn)行該任務(wù)。

首先我們需要通過(guò)npm來(lái)安裝gulp-jshint模塊。我們還需要一個(gè)jshint的報(bào)告工具，使輸出格式化并添加顏色。輸入如下命令安裝這兩個(gè)模塊：

$ npm install --save-dev gulp-jshint jshint-stylish

現(xiàn)在將該任務(wù)添加到gulpfile。

/* File: gulpfile.js */

// grab our package
var gulp = require("gulp");
var jshint = require("gulp-jshint");

// define the default task and add the watch task to it
gulp.task("default", ["watch"]);

// configure the jshint task
gulp.task("jshint", function () {
      return gulp.src("source/javascript/**/*.js")
          .pipe(jshint())
          .pipe(jshint.reporter("jshint-stylish"));
});

// configure which files to watch and what tasks to use on file changes
gulp.task("watch", function () {
      gulp.watch("source/javascript/**/*.js", ["jshint"]);
});

看看我們做了哪些修改。

我們將watch任務(wù)添加為default任務(wù)的依賴，所以當(dāng)我們運(yùn)行：

$ gulp

也將會(huì)運(yùn)行watch任務(wù)。

現(xiàn)在看看新的jshint任務(wù)。它獲取任何source/javascript或其子目錄下的.js文件，因此，source/javascript/carousel/main.js同樣會(huì)應(yīng)用于該任務(wù)。這些文件將會(huì)傳遞給gulp-jshint插件，然后再傳遞給stylish reporter，給我們展示jshint檢查代碼的結(jié)果。

我們可以這樣運(yùn)行該任務(wù)：

$ gulp jshint

非常簡(jiǎn)單！

OK，那么后面的watch任務(wù)呢。其實(shí)也很簡(jiǎn)單，如果檢測(cè)到任何js文件有改動(dòng)，就會(huì)運(yùn)行jshint任務(wù)。

Sass作為CSS的擴(kuò)展，支持變量，嵌套規(guī)則，混合，內(nèi)聯(lián)導(dǎo)入等。

Ken Wheeler has already done an awesome write up on Sass that you can find here.

為了編譯Sass，我們需要使用gulp-sass。

NOTE: gulp-sass uses node-sass which in turn uses libsass. On windows you"ll need to install python 2.7.x and Visual Studio Express 2013 in order to compile libsass. Mac and Linux will use whatever gcc is available.
An alternative is to use gulp-ruby-sass, which uses ruby and the sass gem instead.

/* file: gulpfile.js */

var gulp = require("gulp"),
    jshint = require("gulp-jshint"),
    sass = require("gulp-sass");
    
/* jshint task would be here */

gulp.task("build-css", function () {
      return gulp.src("source/scss/**/*.scss")
          .pipe(sass())
          .pipe(gulp.dest("public/assets/stylesheets"));
});

/* updated watch task to include sass */

gulp.task("watch", function () {
      gulp.watch("source/javascript/**/*.js", ["jshint"]);
      gulp.watch("source/scss/**/*.scss", ["build-css"]);
});

我們可以使用gulp-sourcemaps添加sourcemaps。sourcemap是非常棒的功能，如果你從未使用過(guò)可以體驗(yàn)一下了。它可以將處理壓縮或修改過(guò)的文件映射到源文件。

A list of the plugins that support gulp-sourcemaps can be found here.

/* file: gulpfile.js */
var gulp       = require("gulp"),
    jshint     = require("gulp-jshint"),
    sass       = require("gulp-sass"),
    sourcemaps = require("gulp-sourcemaps");

gulp.task("build-css", function() {
  return gulp.src("source/scss/**/*.scss")
    .pipe(sourcemaps.init())  // Process the original sources
      .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest("public/assets/stylesheets"));
});

在使用大量的JavaScript時(shí)，通常需要將它們整合在一起。通用插件gulp-concat可以輕松完成這個(gè)任務(wù)。

我們還可以更進(jìn)一步，通過(guò)使用uglify工具以獲得更小的文件體積。

另外，我們將根據(jù)是否在生產(chǎn)環(huán)境來(lái)判斷是否使用uglify。

gulp.task("build-js", function() {
  return gulp.src("source/javascript/**/*.js")
    .pipe(sourcemaps.init())
      .pipe(concat("bundle.js"))
      //only uglify if gulp is ran with "--type production"
      .pipe(gutil.env.type === "production" ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("public/assets/javascript"));
});

我們只是了解了gulp的表面。Gulp可以根據(jù)您的需要變的復(fù)雜或者簡(jiǎn)單，您可以通過(guò)代碼配置讓它完成任何任務(wù)。

從簡(jiǎn)單如合并JavaScript文件，到自動(dòng)化部署到S3 bucket。Gulp就是這樣一個(gè)可以幫助您簡(jiǎn)單、快速完成任務(wù)的工具。