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

基於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');//有通配符開始出現的那部分路徑爲 **/*.jsgulp.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/