摘要：簡而言之，任何符合匹配規則的文件發生改變就會運行任務列表中的任務。第二種形式的參數是一個匹配規則，可選的選項對象，和一個可選的回調函數。當事件發生時會運行該回調函數。它獲取任何或其子目錄下的文件，因此，同樣會應用于該任務。

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

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

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

Gulp 是一個流式構建系統，通過使用node流將文件操作全部在內存中完成，而且文件在接受到您的命令前不會寫入。

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

Gulp的安裝和運行非常簡單，只需要如下步驟：

全局安裝

作為開發依賴安裝

創建一個gulpfile.js文件

第一步，全局安裝Gulp。

$ npm install --global gulp

然后，您需要將gulp設為項目的開發依賴模塊。確保您已經有package.json文件或者命令行運行npm init，然后就可以用下面的命令將其安裝為項目開發依賴模塊：

$ npm install --save-dev gulp

最后，您需要在項目的根目錄創建gulpfile.js文件，其中包含著你的任務。作為中間步驟，我們將添加gulp util插件，以便我們有一個可以顯示執行情況的可運行任務。

$ npm install --save-dev gulp-util

在剛才創建的gulpfile.js中，我們將寫一個非常簡單的任務來打印一行字符串。

/* 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");
});

現在執行gulp命令，如果一切正常的話，將會有如下的輸出：

> 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

我們可能需要先花一些時間定義一下項目結構。在此示例中，我們將使用下面的結構，你可以先將文件內容空著。

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會在我們使用gulp處理和組合source/scss中的SASS文件時創建。bundle.js文件會在我們使用gulp壓縮和組合JS文件時創建。

Gulp是一個流式構建系統。它的流特性允許它管理和傳遞被操作的數據或插件使用的數據。插件旨在每次只做一個工作，所以通過一個多個插件傳遞一個單一的文件并不罕見。

gulp的api非常簡潔輕量，包含4個頂級函數。如下所示：

gulp.task

gulp.src

gulp.dest

gulp.watch

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

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

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

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

gulp.src指向我們要使用的文件。它的參數是一個匹配規則和一個可選的選項對象。它使用.pipe方法將其輸出鏈接到其他插件。

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

我們可以使用gulp.src和gulp.dest進行簡單的文件復制操作：

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

gulp.watch像gulp.task一樣有兩種形式。它們都返回一個EventEmitter并觸發change事件。第一種形式的參數是一個匹配規則，一個可選的選項對象，和一個任務數組。

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

簡而言之，任何符合匹配規則的文件發生改變就會運行任務列表中的任務。如上面的代碼，只要任何source/javascript子文件夾下的.js文件發生了改變，就會對這些文件運行jshint任務。

第二種形式的參數是一個匹配規則，可選的選項對象，和一個可選的回調函數。當change事件發生時會運行該回調函數。

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

更多Gulp的資料請參考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.

我們的第一個任務是使用jshint檢查javascript代碼，我們將會設置在每次保存javascript文件時運行該任務。

首先我們需要通過npm來安裝gulp-jshint模塊。我們還需要一個jshint的報告工具，使輸出格式化并添加顏色。輸入如下命令安裝這兩個模塊：

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

現在將該任務添加到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任務添加為default任務的依賴，所以當我們運行：

$ gulp

也將會運行watch任務。

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

我們可以這樣運行該任務：

$ gulp jshint

非常簡單！

OK，那么后面的watch任務呢。其實也很簡單，如果檢測到任何js文件有改動，就會運行jshint任務。

Sass作為CSS的擴展，支持變量，嵌套規則，混合，內聯導入等。

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是非常棒的功能，如果你從未使用過可以體驗一下了。它可以將處理壓縮或修改過的文件映射到源文件。

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時，通常需要將它們整合在一起。通用插件gulp-concat可以輕松完成這個任務。

我們還可以更進一步，通過使用uglify工具以獲得更小的文件體積。

另外，我們將根據是否在生產環境來判斷是否使用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可以根據您的需要變的復雜或者簡單，您可以通過代碼配置讓它完成任何任務。

從簡單如合并JavaScript文件，到自動化部署到S3 bucket。Gulp就是這樣一個可以幫助您簡單、快速完成任務的工具。