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

jopen 9年前發布 | 15K 次閱讀項目構建 gulp

原文 http://www.ituring.com.cn/article/206005

What is gulp?

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

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

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

流(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');
});

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

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

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/

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1446090640929.html

項目構建 gulp

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

What is gulp?

流(stream)

特點

安裝

gulp的使用

工作方式

globs的匹配規則

下面以例子來加深理解

獲取流

options.buffer

options.read

options.base

寫文件

options.cwd

options.mode

相關經驗

相關資訊

相關文檔

目錄