基於Node.js的自動化工具Gulp

What is gulp?

　　gulp是前端開發過程中一種基於流的程式碼構建工具，是自動化專案的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她，不僅可以很愉快的編寫程式碼，而且大大提高我們的工作效率。

　　gulp是基於Nodejs的自動任務執行器， 她能自動化地完成 javascript、coffee、sass、less、html/image、css 等檔案的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。在實現上，她借鑑了Unix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。

流(stream)

　　流,簡單來說就是建立在物件導向基礎上的一種抽象的處理資料的工具。在流中，定義了一些處理資料的基本操作，如讀取資料，寫入資料等，程式設計師是對流進行所有操作的，而不用關心流的另一頭資料的真正流向。流不但可以處理檔案，還可以處理動態記憶體、網路資料等多種資料形式。

　　而gulp正是通過流和程式碼優於配置的策略來儘量簡化任務編寫的工作。這看起來有點“像jQuery”的方法，把動作串起來建立構建任務。早在Unix的初期，流就已經存在了。流在Node.js生態系統中也扮演了重要的角色，類似於*nix將幾乎所有裝置抽象為檔案一樣，Node將幾乎所有IO操作都抽象成了stream的操作。因此用gulp編寫任務也可看作是用Node.js編寫任務。當使用流時，gulp去除了中間檔案，只將最後的輸出寫入磁碟，整個過程因此變得更快。

特點

• 易於使用

  　　通過程式碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理。

• 構建快速

  　　利用 Node.js 流的威力，你可以快速構建專案並減少頻繁的 IO 操作。

• 易於學習

  　　通過最少的 API，掌握 gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。

• 外掛高質

  　　gulp 嚴格的外掛指南確保外掛如你期望的那樣簡潔高質得工作。

安裝

　　首先確保你已經正確安裝了nodejs環境。然後以全域性方式安裝gulp：

npm install -g gulp

　　全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次。把目錄切換到你的專案資料夾中，然後在命令列中執行：

npm install gulp

　　如果想在安裝的時候把gulp寫進專案package.json檔案的依賴中，則可以加上--save-dev：

npm install --save-dev gulp

　　這樣就完成了gulp的安裝，接下來就可以在專案中應用gulp了。

gulp的使用

1.建立gulpfile.js檔案

　　gulp也需要一個檔案作為它的主檔案，在gulp中這個檔案叫做gulpfile.js。新建一個檔名為gulpfile.js的檔案，然後放到你的專案目錄中。之後要做的事情就是在gulpfile.js檔案中定義我們的任務了。下面是一個最簡單的gulpfile.js檔案內容示例，它定義了一個預設的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

此時我們的目錄結構是這樣子的：

2.執行gulp任務

　　要執行gulp任務，只需切換到存放gulpfile.js檔案的目錄(windows平臺請使用cmd或者Power Shell等工具)，然後在命令列中執行gulp命令就行了，gulp後面可以加上要執行的任務名，例如gulp task1，如果沒有指定任務名，則會執行任務名為default的預設任務。

3.課程練習環境

　　(1)在右面的編輯環境中點選【檔案管理】，就可以看到我們上圖已經為大家建立的目錄結構；

　　(2)然後我們就可以對gulpfile.js檔案進行編輯（雙擊），編輯完成後點選【儲存檔案】；

　　(3)最後在終端中轉到我們的專案目錄，執行gulp命令，這樣就可以在終端中檢視結果了。

　　另外，在列出的目錄項中，我們可以通過右鍵來對檔案或目錄進行操作。

工作方式

　　在介紹gulp API之前，我們首先來說一下gulp.js工作方式。在gulp中，使用的是Nodejs中的stream(流)，首先獲取到需要的stream，然後可以通過stream的pipe()方法把流匯入到你想要的地方，比如gulp的外掛中，經過外掛處理後的流又可以繼續匯入到其他外掛中，當然也可以把流寫入到檔案中。所以gulp是以stream為媒介的，它不需要頻繁的生成臨時檔案，這也是我們應用gulp的一個原因。

　　gulp的使用流程一般是：首先通過gulp.src()方法獲取到想要處理的檔案流，然後把檔案流通過pipe方法匯入到gulp的外掛中，最後把經過外掛處理後的流再通過pipe方法匯入到gulp.dest()中，gulp.dest()方法則把流中的內容寫入到檔案中。例如：

var gulp = require('gulp');

gulp.src('script/jquery.js') // 獲取流的api .pipe(gulp.dest('dist/foo.js')); // 寫放檔案的api

　　我們將在本章內容中來給同學們講解gulp API，其中包括gulp.src()，gulp.task()，gulp.dest()，gulp.watch()，gulp.run()。

globs的匹配規則

　　我們重點說說gulp用到的globs的匹配規則以及一些檔案匹配技巧，我們將會在後面的課程中用到這些規則。

　　gulp內部使用了node-glob模組來實現其檔案匹配功能。我們可以使用下面這些特殊的字元來匹配我們想要的檔案：

匹配符     說明
\*    匹配檔案路徑中的0個或多個字元，但不會匹配路徑分隔符，除非路徑分隔符出現在末尾
**    匹配路徑中的0個或多個目錄及其子目錄,需要單獨出現，即它左右不能有其他東西了。如果出現在末尾，也能匹配檔案。
?    匹配檔案路徑中的一個字元(不會匹配路徑分隔符)
[...]    匹配方括號中出現的字元中的任意一個，當方括號中第一個字元為^或!時，則表示不匹配方括號中出現的其他字元中的任意一個，類似js正規表示式中的用法
!(pattern|pattern|pattern)    匹配任何與括號中給定的任一模式都不匹配的
?(pattern|pattern|pattern)    匹配括號中給定的任一模式0次或1次，類似於js正則中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern)    匹配括號中給定的任一模式至少1次，類似於js正則中的(pattern|pattern|pattern)+
*(pattern|pattern|pattern)    匹配括號中給定的任一模式0次或多次，類似於js正則中的(pattern|pattern|pattern)*
@(pattern|pattern|pattern)    匹配括號中給定的任一模式1次，類似於js正則中的(pattern|pattern|pattern)

下面以例子來加深理解

\* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 a.js,style.css,a.b,x.y

*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配所有的目錄和檔案

**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js

a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因為只有單**單獨出現才能匹配多級目錄

?.js 能匹配 a.js,b.js,c.js

a?? 能匹配 a.b,abc,但不能匹配ab/,因為它不會匹配路徑分隔符

[xyz].js 只能匹配 x.js,y.js,z.js,不會匹配xy.js,xyz.js等,整個中括號只代表一個字元

[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

獲取流

　　gulp.src()方法正是用來獲取流的，但要注意這個流裡的內容不是原始的檔案流，而是一個虛擬檔案物件流(Vinyl files)，這個虛擬檔案物件中儲存著原始檔案的路徑、檔名、內容等資訊。其語法為：

gulp.src(globs[, options]);

globs引數是檔案匹配模式(類似正規表示式)，用來匹配檔案路徑(包括檔名)，當然這裡也可以直接指定某個具體的檔案路徑。當有多個匹配模式時，該引數可以為一個陣列;型別為String或 Array。我們在前一節中已經講過了globs的匹配規則，這裡就不在詳述。

當有多種匹配模式時可以使用陣列

//使用陣列的方式來匹配多種檔案
gulp.src(['js/*.js','css/*.css','*.html'])

options為可選引數。以下為options的選項引數:

options.buffer

型別： Boolean 預設值： true

　　如果該項被設定為 false，那麼將會以 stream 方式返回 file.contents 而不是檔案 buffer 的形式。這在處理一些大檔案的時候將會很有用。注意：外掛可能並不會實現對 stream 的支援。

options.read

型別： Boolean 預設值： true

如果該項被設定為 false， 那麼 file.contents 會返回空值（null），也就是並不會去讀取檔案。

options.base

型別： String ， 設定輸出路徑以某個路徑的某個組成部分為基礎向後拼接。

如, 請想像一下在一個路徑為 client/js/somedir 的目錄中，有一個檔案叫 somefile.js ：

gulp.src('client/js/**/*.js') 
// 匹配 'client/js/somedir/somefile.js' 現在 `base` 的值為 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  
  //寫入 'build/somedir/somefile.js' 將`client/js/`替換為build

gulp.src('client/js/**/*.js', { base: 'client' }) 
// base 的值為 'client'
  .pipe(minify())
  .pipe(gulp.dest('build'));  
  // 寫入 'build/js/somedir/somefile.js' 將`client`替換為build

寫檔案

　　gulp.dest()方法是用來寫檔案的，其語法為：

gulp.dest(path[,options])

path為寫入檔案的路徑；

options為一個可選的引數物件，以下為選項引數：

options.cwd

型別： String 預設值： process.cwd()

輸出目錄的 cwd 引數，只在所給的輸出目錄是相對路徑時候有效。

options.mode

型別： String 預設值： 0777

八進位制許可權字元，用以定義所有在輸出目錄中所建立的目錄的許可權。

var gulp = require('gulp');

gulp.src('script/jquery.js')　 // 獲取流 .pipe(gulp.dest('dist/foo.js')); // 寫放檔案

　　 　　下面再說說生成的檔案路徑與我們給gulp.dest()方法傳入的路徑引數之間的關係。 　　gulp.dest(path)生成的檔案路徑是我們傳入的path引數後面再加上gulp.src()中有萬用字元開始出現的那部分路徑。例如：

 var gulp = reruire('gulp');

//有萬用字元開始出現的那部分路徑為 **/*.js
gulp.src('script/**/*.js')
    .pipe(gulp.dest('dist')); //最後生成的檔案路徑為 dist/**/*.js

//如果 **/*.js 匹配到的檔案為 jquery/jquery.js ,則生成的檔案路徑為 dist/jquery/jquery.js

　　用gulp.dest()把檔案流寫入檔案後，檔案流仍然可以繼續使用。

更多示例和線上練習可以去這裡看看： http://www.hubwiz.com/course/562089cb1bc20c980538e25b/