執行 $Gulp 時發生了什么 —— 基於 Gulp 的前端集成解決方案（二）

前言

文章 在windows下安裝gulp —— 基於 Gulp 的前端集成解決方案（一） 中，已經完成對 gulp 的安裝，由於是window環境，文中特意提到了可以通過安裝 gitbash 來代替 window 系統的 CMD 命令行工具。本節主要圍繞 如何使用 Gulp 完成一個預編譯 SASS 文件的任務 來逐步熟悉 Gulp 。

本文地址：http://www.cnblogs.com/leonkao/p/4611102.html

相關連接導航

在windows下安裝gulp —— 基於 Gulp 的前端集成解決方案（一）

執行 $Gulp 時發生了什么 —— 基於 Gulp 的前端集成解決方案（二）

常用 Gulp 插件匯總 —— 基於 Gulp 的前端集成解決方案（三）

構建一個基本的前端自動化開發環境 —— 基於 Gulp 的前端集成解決方案（四）

Gulp 概述

Gulp 是一個構建工具，通過自動化處理常用任務以提高工作效率。其基於 Node.js 構建，可以使用 javascript 定義任務。Gulp 本身並不做任何事情，但他提供了定義任務、執行任務的能力，以及加載插件的機制。通過編寫任務以讓 Gulp 替我們自動完成諸如 SASS 文件預編譯、JS文件壓縮及合並、瀏覽器同步等日常事務。

Gulp 入門

要使 Gulp 開始工作，需要先創建一個 gulpfile.js 文件，所有的任務都在這里頭定義。然后通過  $Gulp 任務名稱  或  $gulp  執行任務。下面，假設有一個預編譯 SASS 文件的任務，以這個小任務為牽引逐步了解 Gulp。

1、創建項目文件夾 learning-gulp ，隨后為其創建 scss 和 styles 子目錄，分別用於存儲 SASS 文件和 CSS 文件。並創建一個 sass.scss 文件到 scss 目錄中。輸入一段 sass 代碼：

$color: #FF0000;
body{
    background-color:$color;
}

2、啟動 gitbash 執行   $ cd /d/learning-gulp  進入項目目錄。

3、在當前項目下安裝 Gulp ， $ npm install --save-dev gulp  ，隨后安裝 Gulp-sass 插件  $ npm install --save-dev gulp-sass  。

4、在項目目錄下創建文件 gulpfile.js ,並輸入下面內容：

'use strict';

var gulp  = require('gulp'),
      sass  = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src("scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("styles"));
});

gulp.task('default', ['sass']);    

5、執行  $ gulp  或  $ gulp "sass"  命令，不出意外會輸出以下結果：

$ gulp
[22:06:10] Using gulpfile d:\learning-gulp\gulpf
[22:06:10] Starting 'sass'...
[22:06:10] Finished 'sass' after 18 ms
[22:06:10] Starting 'default'...
[22:06:10] Finished 'default' after 8.27 μs

這個時候，打開 styles 文件夾，會發現里面多了個名為 sass.css 的文件，其內容為我們上面第一步中 scss 文件的編譯結果。那么，執行  $ gulp  時都發生了什么呢？

執行 $ Gulp 時發生了什么

前面提到 Gulp 本身並不會做任何事情，但可以執行任務，所以，我們通過編寫任務，把任務交給gulp去執行。上面例子第四步，創建了一個文件 gulpfile.js ，gulpfile.js 就是我們定義任務的地方。一開始加載了 gulp 和 gulp-sass 模塊：

var gulp    = require('gulp'),
    sass    = require('gulp-sass');

緊接着，定義了一個名字叫做 sass 的任務，當執行 sass 任務的時候會執行 task 的的第二個參數(匿名函數)

gulp.task('sass', function() {

});

下面看這個匿名函數體，這里需要一點點 stream 基礎。

return gulp.src("scss/*.scss")
      .pipe(sass())
      .pipe(gulp.dest("styles"));

Stream

stream 允許你傳遞數據給一些函數，函數將對數據進行修改，然后將修改后的數據傳遞給下一個函數。上面的例子中 gulp.src() 函數通過字符串 "scss/*.scss" 匹配到所有的 sass 文件，然后創建一個 stream 對象。隨后將其傳遞給 sass() 函數，sass() 對數據進行修改后再返回一個 stream 對象傳遞給 gulp.dest(), gulp.dest() 將文件輸出到 styles 目錄中。

要理解這段代碼其實也不難，只要適當了解一下 nodejs 中 stream 的概念即可。這里給幾個關於stream的文章，供學習參考：

https://github.com/substack/stream-handbook
http://nodejs.org/docs/v0.4.7/api/streams.html
http://my.oschina.net/sundq/blog/192276

gulp.src(globs[, options])

該方法將匹配到的文件返回為一個可以通過pipe傳送給plugin 的 stream。

定義任務（task）

可以使用 gulp.task() 函數定義任務。

下面代碼演示如何創建一個任務，傳遞兩個參數給gulp.task()：string 任務名字，funciton(){}任務業務邏輯。運行  $gulp hi  控制台將輸出 “Hello Gulp!”

gulp.task('hi', function () {
   console.log('Hello Gulp!');
});

也可以創建一個用來執行一個任務列表的任務，說起來有點繞口，看代碼就一目了然了。下面創建一個 build 任務，當執行該任務時會依次執行 sass/jshint任務。

gulp.task('build', ['sass', 'jshint']);

有時可能需要在執行一個任務前，先確保另一個任務已經執行完畢，此時我們只需在任務名和當前任務體之間插入要提前執行的任務列表（數組形式）即可，如下：

gulp.task('newtask', ['hi'], function () {

});

這會在執行newtask之前先執行完畢 hi 任務。

default 任務

上面例子第五步中提到，執行  $ gulp  或  $ gulp "sass"  命令。其實執行 $ gulp 與 $gulp default 是一樣的效果，Gulp 在沒有提供任務名的時候會執行名為 default 的任務。上例中我們把 sass 任務放在 default 前執行，所以直接執行 $ gulp 就會編譯 SCSS 文件。

gulp.dest()

將傳輸進來的數據生成為文件/文件夾，不存在的文件夾將會被創建。新文件路徑就是傳遞進去的路徑參數。看下面的例子有助於更好的理解 gulp.dest()

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

文件監控

Gulp 提供文件監控的能力，它允許我們監控一個或一組文件的狀態，當這些文件發生變化時觸發一個任務。這是一個非常實用和常用的功能，比如，可以通過監控 sass 文件，來做到當修改並完成保存 scss 文件變化后自動變異 scss 文件為 css 文件，然后注入或刷新頁面。

通過 gulp.watch() 函數可實現對文件的監控，該函數有兩個參數，第一個參數用於匹配（類似gulp.src()）待監控的文件，第二個參數是一個數組[當文件變化時要執行的任務隊列]，或回調函數。

繼續上面 gulp 入門 章節的例子，假設我們希望在修改 sass 文件時，在按下Ctrl + S 后自動編譯 SASS 文件，而不是通過手動執行  $ gulp sass 命令。我們可以向下面這樣使用 gulp.watch() 

gulp.task('watch', function () {
   gulp.watch('scss/*.scss', ['sass']);
});

運行 $gulp watch 執行該任務后，只要我們修改 sass 文件，當我們完成保存時，gulp 會自動編譯 Sass 文件到styles目錄下。

我們還可以給 gulp.watch() 傳遞一個回調函數，替換掉剛才的那個任務列表數組 ['sass']，下面的例子中回調函數傳遞了一個對象 event，它包含一些觸發回調函數的事件信息。

gulp.watch('scss/*.scss', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

gulp.watch() 返回一個事件發射器(EventEmitter)， 通過事件發射器可以監聽 類似Change 、end 、error、ready、nomatch等事件。

插件

上面例子中我們用到了 gulp-sass 插件，該插件實現對 sass.scss 文件的編譯，最終生成 css 文件。要使用一個 gulp 插件非常方便，只需在使用前加載該插件，然后pipe傳遞數據給插件就可以，gulp中幾乎全部的插件，在不做任何配置的情況下，都是可以直接使用的。gulp-sass 插件功能非常完善，通過修改改配置可以改變其行為，本節只為熟悉 gulp 的基本運行流程，暫不討論某一個插件如何使用。后續章節會挑選出最常/實用的插件仔細討論，以及如何通過多個插件來完成一組任務。最后會仔細探索插件機制以及如何開發一個插件並提交到gulp插件庫。

總結

1. Gulp 任務在 Gulpfile.js 中定義
2. 在 gulpfile.js 中通過 require 加載第三方模塊/插件
3. 通過 gulp.task() 函數可以定義任務，通過傳遞任務名字和一個匿名函數可以快速定義一個簡單任務。
4. 還可以通過在任務名稱后再傳遞一個數組來定義任務列表，或當前任務執行前需執行完畢的任務。
5. 通過 gulp.src() 可以選擇文件，並將其生成為 stream 對象。
6. stream 可以傳遞給一些函數，函數會對數據進行修改，並將修改改的數據以 stream 形式返回，便於傳遞給下一個函數使用。
7. 要執行 Gulp 任務，只需要在命令行輸入  gulp "任務名"  即可，如果沒有指定要執行的任務名，gulp 將默認執行 名字為 default  的任務。

參考資料

由於個人能力和語言水平限制，某些知識點可能說的還不夠准確嚴謹，歡迎糾錯。大家對文中內容有任何疑點均可在評論中提出，或直接查閱本文參考資料。

http://gulpjs.com/

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

https://markgoodyear.com/2014/01/getting-started-with-gulp/

寫在后面

關於本文如果您有任何建議或疑問請在下面留言交流。