上期回顧：構建工具gulp之入門指南

上期我們瞭解了gulp的一些入門知識，本期將進一步瞭解gulp，為大家講述gulp之主要API的內容。

gulp.src(globs[, options])

src方法用於產生資料流。它的引數表示所要處理的檔案，這些指定的檔案會轉換成資料流。

src方法的引數可以是一個字串：

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin())

    .pipe(gulp.dest('dist/images'));

src方法的引數還可以是一個數組，用來指定多個成員：

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

globs引數萬用字元路徑匹配規則如下：

src方法用於產生資料流。它的引數表示所要處理的檔案，這些指定的檔案會轉換成資料流。

src方法的引數可以是一個字串：

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin())

    .pipe(gulp.dest('dist/images'));

src方法的引數還可以是一個數組，用來指定多個成員：

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

globs引數萬用字元路徑匹配規則如下：

js/app.js：指定具體的檔名；

*：匹配所有檔案，例：src/*.js(包含src下的所有js檔案)；

**：匹配0個或多個子資料夾，例：src/**/*.js(包含src下0個或多個子資料夾下的js檔案)；

{}：匹配多個屬性，例：src/{a,b}.js(包含a.js和b.js檔案)，src/*.{jpg,png,gif}(src下的所有jpg/png/gif檔案)；

!：排除檔案，例：!src/a.js(不包含src下的a.js檔案)；

?：匹配檔案路徑中的一個字元，例：js/a?.js 能匹配 js/ab.js，不能匹配js/a.js；

[...]：匹配方括號中出現的字元中的任意一個，當方括號中第一個字元為^或!時，則表示不匹配方括號中出現的其他字元中的任意一個，類似js正則表示式中的用法。例：js/a[0-3].js

，匹配js目錄下以a開頭，第二個字元為0-3之間（包括0和3）的js檔案。若改為 ["js/[^ab].js"]，則匹配 js/c.js，不匹配 js/cd.js、js/ac.js；

?(pattern|pattern|pattern)：匹配多個 pattern 中 0 或 1 個（精確匹配，不可以組合）。例：js/?(a|b).js，匹配 js 目錄下的 a.js、b.js，不匹配 ab.js

+(pattern|pattern|pattern)：至少匹配多個 pattern 中的一個。例：js/+(a|b)b.js，匹配 js 目錄下的 ab.js、bb.js、ababab.js，不能匹配abcd.js（也就是說：只允許匹配出現在範圍內的字元） ，也不能像 js/*(a|b)b.js 那樣匹配 b.js。

*(a|b|c)：匹配括號中多個 pattern 中0或任意多個（pattern可相互組合）。例：js/*(a|b|c).js，匹配 js 目錄下的 a.js、ab.js、abc.js、ba.js，不匹配 abcd.js（也就是說：只允許匹配出現在範圍內的字元）。

@(pattern|pattern|pattern)：匹配多個 pattern 中的任意一個（即不可以組合，且不能為空或大於1個）。例：js/@(a|b)b.js，匹配 js 目錄下的ab.js、bb.js，不匹配 b.js、abb.js、abc.js。

options型別(可選)，有3個屬性buffer、read、base；

options.buffer：（預設：true）設定為false，將返回file.content的流並且不緩衝檔案，處理大檔案時非常有用；

options.read：（預設：true）設定false，將不執行讀取檔案操作，返回null；

options.base：設定輸出路徑以某個路徑的某個組成部分為基礎向後拼接；

gulp.dest(path[, options])

dest方法是指定處理完後文件輸出的路徑；

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin())

    .pipe(gulp.dest('dist/images'));

l path 檔案將被寫入的路徑（輸出目錄）。也可以傳入一個函式，在函式中返回相應路徑；

l options  配置物件，有2個屬性cwd、mode；

options.cwd：型別：String，預設：process.cwd()：前指令碼的工作目錄的路徑 當檔案輸出路徑為相對路徑將會用到；

options.mode：型別：String，預設：0777 指定被建立資料夾的許可權；

gulp.task(name[, deps], fn)

task定義一個gulp任務；

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

  // do something

});

l name 任務的名字，如果你需要在命令列中執行你的某些任務，那麼，請不要在名字中使用空格

l deps一個包含任務列表的陣列，這些任務會在你當前任務執行之前完成

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {

  // do something

})

l fn 該函式定義任務所需要執行的一些操作。通常來說，它會是這樣中形式

gulp.src().pipe(taskFn())

gulp.watch(glob [, opts], tasks)

watch監視檔案，並且可以在檔案發生改動時候做一些事情。

l glob   需要處理的原始檔匹配符路徑

l opts   型別(可選)：Object具體參看gaze  https://github.com/shama/gaze

l tasks （型別: Array）需要在檔案變動後執行的一個或者多個通過gulp.task() 建立的 task 的名字

l cb(event)：  型別(可選)：Function每個檔案變化執行的回撥函式，callback會被傳入一個名為 event的物件，這個物件描述了所監控到的變動

gulp.watch('js/**/*.js', function(event) {

  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');

});

event.type 發生的變動的型別：added, changed 或者 deleted。

event.path 觸發了該事件的檔案的路徑。

本文中主要把gulp的api介紹完了，基本上gulp也算是掌握了。 下一篇文章我們將逐步去了解各種任務的外掛使用。

下期預告

gulp教程之靜態資源壓縮