[轉(zhuǎn)載]（https://github.com/zhonglimh/Gulp）
Gulp構(gòu)建前端自動(dòng)化工作流
Gulp構(gòu)建前端自動(dòng)化工作流之：常用插件介紹及使用
在對(duì)Gulp有了一個(gè)初步的了解之后，我們開始構(gòu)建一個(gè)較為完整的Gulp開發(fā)環(huán)境。
本文主要分為6個(gè)段落：
- 1. 構(gòu)建項(xiàng)目目錄結(jié)構(gòu)（Directory Structure Build）
- 2. 插件介紹及使用方法（Tasks and dependencies）
- 3. 擴(kuò)展優(yōu)化（Extend & Optimize Task）
- 4. 其他插件介紹（Other plug-ins）
- 5. 匹配規(guī)則（Match Files）
- 6. 注意事項(xiàng)（Attention）
關(guān)于Gulp的入門介紹及安裝方法酥馍，可先去《Gulp構(gòu)建前端自動(dòng)化工作流之：入門介紹及LiveReload的使用》 這篇文章查看矛辕。對(duì)其有個(gè)初步認(rèn)識(shí)后贷屎，便于后文的理解轧叽。
1. 構(gòu)建項(xiàng)目目錄結(jié)構(gòu)（Directory Structure Build）
+ my-gulp（項(xiàng)目文件夾）
+ node_modules Gulp組件目錄
+ dist 發(fā)布環(huán)境
+ css 編譯后的CSS文件
─ etc...
+ images 壓縮后的圖片文件
─ etc...
+ js 編譯后的JS文件
─ etc...
─ html 靜態(tài)文件
+ src 開發(fā)環(huán)境
+ sass SASS文件
─ etc...
+ images 圖片文件
─ etc...
+ js JS文件
─ etc...
─ html 靜態(tài)文件
─ gulpfile.js Gulp任務(wù)文件
注：
+ 表示目錄 ─ 表示文件
2. 插件介紹及使用方法（Tasks and dependencies）
2.1 HTML處理（HTML Task）
僅把開發(fā)環(huán)境中的HTML文件勺疼，移動(dòng)至發(fā)布環(huán)境碌宴。
基礎(chǔ)配置：
gulp.task('html', function() {
return gulp.src('src/**/*.html') // 指明源文件路徑、并進(jìn)行文件匹配
.pipe('dist'); // 輸出路徑
});
執(zhí)行命令：
gulp html
2.2 樣式處理（CSS Task）
CSS預(yù)處理/Sass編譯 (gulp-ruby-sass) ：
相比較glup-sass而言籍滴，速度會(huì)稍許慢點(diǎn)酪夷，但功能更多并且穩(wěn)定。
安裝SASS：
- 像Gulp基于Node.js一樣孽惰，Sass基于Ruby環(huán)境晚岭，所以我們先去官網(wǎng)下載并安裝Ruby（在安裝的時(shí)候，請(qǐng)勾選
Add Ruby executables to your PATH這個(gè)選項(xiàng)勋功，添加環(huán)境變量坦报，不然以后使用編譯軟件的時(shí)候會(huì)提示找不到ruby環(huán)境）库说。 - 安裝完ruby之后，在開始菜單中片择，找到剛才我們安裝的ruby潜的，打開
Start Command Prompt with Ruby - 然后直接在命令行中輸入
gem install sass按回車鍵確認(rèn)，等待一段時(shí)間就會(huì)提示你sass安裝成功字管。
注：
由于近期墻的比較嚴(yán)重啰挪，外加（上海）電信限制了外網(wǎng)訪問(wèn)速度。如果安裝失敗嘲叔，請(qǐng)使用淘寶的Ruby鏡像亡呵。具體操作方法請(qǐng)參考淘寶RubyGems鏡像安裝 sass。
安裝命令：
npm install gulp-ruby-sass --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var sass = require('gulp-ruby-sass'); // sass/scss編譯
gulp.task('sass', function () {
return sass('src/css', { style: 'compressed' }) // 指明源文件路徑借跪、并進(jìn)行文件匹配（style: 'compressed' 表示輸出格式）
.on('error', function (err) {
console.error('Error!', err.message); // 顯示錯(cuò)誤信息
})
.pipe(gulp.dest('dist/css')); // 輸出路徑
});
執(zhí)行命令：
gulp sass
插件提供4種輸出格式：
nested：嵌套縮進(jìn)的css代碼政己，它是默認(rèn)值酌壕。
expanded：沒(méi)有縮進(jìn)的掏愁、擴(kuò)展的css代碼。
compact：簡(jiǎn)潔格式的css代碼卵牍。
compressed：壓縮后的css代碼果港。
注：
使用前清看清 gulp-ruby-sass 寫法，不要直接拿 gulp-sass 的寫法來(lái)套用糊昙，兩者并不完全相同辛掠。
2.3 腳本壓縮&重命名（Javascript Task）
JS文件壓縮(gulp-uglify)：
使用uglify引擎壓縮JS文件。
安裝命令：
npm install gulp-uglify --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var uglify = require('gulp-uglify'); // js壓縮
gulp.task('script', function() {
return gulp.src('src/js/*.js') // 指明源文件路徑释牺、并進(jìn)行文件匹配
.pipe(uglify({ preserveComments:'some' })) // 使用uglify進(jìn)行壓縮萝衩，并保留部分注釋
.pipe(gulp.dest('dist/js')); // 輸出路徑
});
執(zhí)行命令：
gulp script
2.4 圖片處理（Image Task）
圖片壓縮(gulp-imagemin) + 深度壓縮(imagemin-pngquant)：
壓縮PNG、JPEG没咙、GIF和SVG圖像猩谊。
gulp-imagemin集成了gifsicle 、jpegtran 祭刚、optipng 牌捷、svgo 這4個(gè)插件。而imagemin-pngquant是imagemin插件的一個(gè)擴(kuò)展插件涡驮，用于深度壓縮圖片暗甥。
安裝命令：
npm install gulp-imagemin imagemin-pngquant --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var imagemin = require('gulp-imagemin'), // 圖片壓縮
pngquant = require('imagemin-pngquant'); // 深度壓縮
gulp.task('images', function(){
return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進(jìn)行文件匹配
.pipe(imagemin({
progressive: true, // 無(wú)損壓縮JPG圖片
svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
use: [pngquant()] // 使用pngquant插件進(jìn)行深度壓縮
}))
.pipe(gulp.dest('dist/images')); // 輸出路徑
});
執(zhí)行命令：
gulp images
注：
一般我們所使用的圖片壓縮方法捉捅，都會(huì)對(duì)圖像造成一定的損失撤防，這個(gè)和壓縮比率有一定的關(guān)系。通常我們所說(shuō)的無(wú)損壓縮棒口，也只是控制在我們?nèi)庋垭y以發(fā)現(xiàn)的范圍內(nèi)寄月。換句話來(lái)說(shuō)焰情，在你保存切圖的同時(shí)，其實(shí)已經(jīng)對(duì)圖像造成了一定的損失剥懒，因?yàn)闆](méi)什么人會(huì)選擇100%最佳質(zhì)量導(dǎo)出圖片内舟。兩者是差不多的概念。
2.5 自動(dòng)刷新（LiveReload Task）
網(wǎng)頁(yè)自動(dòng)刷新（文件變動(dòng)后即時(shí)刷新頁(yè)面）(gulp-livereload) + 靜態(tài)服務(wù)器：(gulp-webserver)：
安裝命令：
npm install gulp-livereload gulp-webserver --save-dev
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var livereload = require('gulp-livereload'), // 網(wǎng)頁(yè)自動(dòng)刷新（文件變動(dòng)后即時(shí)刷新頁(yè)面）
webserver = require('gulp-webserver'); // 本地服務(wù)器
// 注冊(cè)任務(wù)
gulp.task('webserver', function() {
gulp.src( '.' ) // 服務(wù)器目錄（.代表根目錄）
.pipe(webserver({ // 運(yùn)行g(shù)ulp-webserver
livereload: true, // 啟用LiveReload
open: true // 服務(wù)器啟動(dòng)時(shí)自動(dòng)打開網(wǎng)頁(yè)
}));
});
// 監(jiān)聽(tīng)任務(wù)
gulp.task('watch',function(){
// 監(jiān)聽(tīng) html
gulp.watch('src/**/*.html', ['html'])
// 監(jiān)聽(tīng) scss
gulp.watch('src/scss/*.scss', ['css']);
// 監(jiān)聽(tīng) images
gulp.watch('src/images/**/*.{png,jpg,gif,svg}', ['images']);
// 監(jiān)聽(tīng) js
gulp.watch('src/js/*.js', ['script']);
});
// 默認(rèn)任務(wù)
gulp.task('default',['webserver','watch']);
執(zhí)行命令：
gulp
3. 擴(kuò)展優(yōu)化（Extend & Optimize Task）
至此初橘，一套簡(jiǎn)單的前端自動(dòng)化工作流/Gulp工作流便已經(jīng)完成⊙橛危現(xiàn)在，我們開始優(yōu)化并擴(kuò)展這些插件保檐，使我們的工作流更為"智能"耕蝉。
3.1 文件重命名(gulp-rename)：
像jQuery一樣，通常為了表示該文件是壓縮版夜只，會(huì)在文件名后加上 .min 后綴垒在。
安裝命令：
npm install gulp-rename --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var uglify = require('gulp-uglify'), // js壓縮
rename = require('gulp-rename'); // 文件重命名
gulp.task('script', function() {
return gulp.src('src/js/*.js') // 指明源文件路徑、并進(jìn)行文件匹配
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({ preserveComments:'some' })) // 使用uglify進(jìn)行壓縮扔亥，并保留部分注釋
.pipe(gulp.dest('dist/js')); // 輸出路徑
});
執(zhí)行命令：
gulp script
3.2 來(lái)源地圖(gulp-sourcemaps)：
這是個(gè)非常有用的插件场躯，我們?cè)趬嚎s、合并等操作之后旅挤，調(diào)試時(shí)所看到的內(nèi)容踢关，都是編譯后的代碼。這樣就導(dǎo)致一個(gè)問(wèn)題粘茄，調(diào)試過(guò)程中無(wú)法和源碼（編譯時(shí)的代碼）位置相對(duì)應(yīng)签舞，讓調(diào)試變的十分困難。
例如：一個(gè)jQuery柒瓣，源碼接近1萬(wàn)行儒搭。但壓縮后只有短短的3~4行，并且變量名稱也已發(fā)生改變芙贫。此時(shí)一旦報(bào)錯(cuò)搂鲫，你很難從錯(cuò)誤信息中直接找到對(duì)應(yīng)代碼的原始位置。同樣屹培，CSS也會(huì)遇到類似問(wèn)題默穴。
而sourcemaps作用，便是成一個(gè).map文件褪秀，里面儲(chǔ)存著對(duì)應(yīng)的源碼位置蓄诽。并內(nèi)嵌在你轉(zhuǎn)換后的文件底部/*# sourceMappingURL=maps/filename.css.map */。這樣在我們調(diào)試時(shí)媒吗，就會(huì)直接顯示（映射）源碼仑氛，而不時(shí)編譯后的代碼。
安裝命令：
npm install gulp-sourcemaps --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var uglify = require('gulp-uglify'), // js壓縮
rename = require('gulp-rename'), // 文件重命名
sourcemaps = require('gulp-sourcemaps'); // 來(lái)源地圖
gulp.task('script', function() {
return gulp.src(['src/js/*.js','!*.min.js']) // 指明源文件路徑、并進(jìn)行文件匹配锯岖，排除 .min.js 后綴的文件
.pipe(sourcemaps.init()) // 執(zhí)行sourcemaps
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({ preserveComments:'some' })) // 使用uglify進(jìn)行壓縮介袜，并保留部分注釋
.pipe(sourcemaps.write('maps')) // 地圖輸出路徑（存放位置）
.pipe(gulp.dest('dist/js')); // 輸出路徑
});
執(zhí)行命令：
gulp script
3.3 只操作有過(guò)修改的文件(gulp-changed)：
比如我們有20個(gè)文件，當(dāng)你修改其中1個(gè)文件時(shí)出吹，由于任務(wù)的局限性遇伞，也會(huì)把其余19匹配的無(wú)辜的同類給一并進(jìn)行處理，這樣就大大降低了效率捶牢。而 gulp-changed 插件鸠珠，會(huì)首先把文件進(jìn)行比對(duì)，如果文件沒(méi)有改動(dòng)秋麸，則跳過(guò)后續(xù)任務(wù)渐排。
安裝命令：
npm install gulp-changed --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var imagemin = require('gulp-imagemin'), // 圖片壓縮
pngquant = require('imagemin-pngquant'), // 深度壓縮
changed = require('gulp-changed'); // 只操作有過(guò)修改的文件
gulp.task('images', function(){
return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進(jìn)行文件匹配
.pipe(changed('dist/images')) // 對(duì)比文件是否有過(guò)改動(dòng)（此處填寫的路徑和輸出路徑保持一致）
.pipe(imagemin({
progressive: true, // 無(wú)損壓縮JPG圖片
svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
use: [pngquant()] // 使用pngquant插件進(jìn)行深度壓縮
}))
.pipe(gulp.dest('dist/images')); // 輸出路徑
});
執(zhí)行命令：
gulp images
此時(shí)我們?cè)偃?dist/images 文件夾灸蟆，查看每個(gè)圖片的最后修改日期驯耻，你就會(huì)發(fā)現(xiàn)只針對(duì)你剛才修改過(guò)的圖片（文件）行了處理，而那些之前已經(jīng)處理過(guò)的圖片則沒(méi)有再進(jìn)行操作炒考。
注：
無(wú)論是 gulp-changed 還是下文中提到的 gulp-cache 可缚，對(duì) sass 文件無(wú)效，始終會(huì)對(duì)所有匹配文件進(jìn)行操作票腰。
3.4 文件合并(gulp-concat)：
比如我們有多個(gè)JS庫(kù)城看，jquery.min.js女气、bootstrap.min.js杏慰、angular.min.js。此時(shí)可以通過(guò)合并炼鞠，減少網(wǎng)絡(luò)請(qǐng)求缘滥。
安裝命令：
npm install gulp-concat --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var concat = require("gulp-concat"); // 文件合并
gulp.task('concat', function () {
gulp.src('js/*.min.js') // 要合并的文件
.pipe(concat('libs.js')) // 合并成libs.js
.pipe(gulp.dest('dist/js'));
});
執(zhí)行命令：
gulp concat
3.5 文件清理(gulp-clean)：
簡(jiǎn)單的說(shuō)，就是一鍵刪除（清理）文件谒主。就拿為了調(diào)試所生成的 .map 文件為例朝扼，在正式發(fā)布時(shí)并不需要，此時(shí)我們就能通過(guò) clean任務(wù)進(jìn)行清理霎肯。
安裝命令：
npm install gulp-clean --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var clean = require('gulp-clean'); // 文件清理
gulp.task('clean', function() {
return gulp.src(['dist/css/maps','dist/js/maps'], {read: false})
.pipe(clean());
});
執(zhí)行命令：
gulp clean
4. 其他插件介紹（Other plug-ins）
這部分插件作為擴(kuò)展閱讀擎颖，只做簡(jiǎn)單介紹。每個(gè)插件都有每個(gè)插件的特性观游，根據(jù)你的喜好和實(shí)際操作環(huán)境而定搂捧，蘿卜青菜各有所愛(ài)。用的人最多的懂缕，不代表就是適合你的允跑。總之，有時(shí)間有精力的聋丝，可以多試試索烹，多玩玩，多配配弱睦，這里也只是冰山一角百姓。
4.1 CSS類
1. CSS壓縮 (gulp-minify-css)
安裝命令：
npm install gulp-minify-css --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var minifyCss = require('gulp-minify-css'); // CSS壓縮
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(gulp.dest('dist'));
});
執(zhí)行命令：
gulp minify-css
2. CSS預(yù)處理/Less編譯 (gulp-less)
安裝命令：
npm install gulp-autoprefixer --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var less = require('gulp-less'); // LESS編譯
gulp.task('less', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
執(zhí)行命令：
gulp less
3. 自動(dòng)添加CSS3瀏覽器前綴(gulp-autoprefixer):
-prefix-free 大家肯定都比較熟，會(huì)自動(dòng)為CSS添加上瀏覽器的前綴况木，幫你擺脫前綴痛苦瓣戚。而 gulp-autoprefixer 插件同樣如此。
安裝命令：
npm install gulp-autoprefixer --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var autoprefixer = require('gulp-autoprefixer'); // 自動(dòng)添加CSS3瀏覽器前綴
gulp.task('prefix', function () {
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var sass = require('gulp-ruby-sass'), // sass/scss編譯
autoprefixer = require('gulp-autoprefixer'); // 自動(dòng)添加CSS3瀏覽器前綴
gulp.task('sass', function () {
return sass('src/css', { style: 'compressed' }) // 指明源文件路徑焦读、并進(jìn)行文件匹配
.on('error', function (err) {
console.error('Error!', err.message); // 顯示錯(cuò)誤信息
})
.pipe(autoprefixer({
browsers: ['last 2 versions'], // 主流瀏覽器的最新兩個(gè)版本
cascade: false // 是否美化屬性值
}))
.pipe(gulp.dest('dist/css')); // 輸出路徑
});
執(zhí)行命令：
gulp sass
4.2 圖像類
1. 使用TinyPN API壓縮圖片(gulp-tinypng)：
使用TinyPNG官方API進(jìn)行圖片壓縮子库。我個(gè)人比較喜歡這個(gè)，因?yàn)橹耙恢庇性谑褂么；巍５捎赥inyPNG服務(wù)器在國(guó)外仑嗅，有時(shí)執(zhí)行起來(lái)會(huì)很慢，除非你有VPN张症，所以在這只做簡(jiǎn)單介紹仓技。
經(jīng)過(guò)我的測(cè)試，gulp-tinypng壓縮后的圖片大小俗他，相當(dāng)于使用imagemin-pngquant深度壓縮后的大小脖捻。使用時(shí)需先注冊(cè)TinyPNG賬戶，獲你的API KEY兆衅。免費(fèi)版每個(gè)月可以壓縮500張圖片地沮，對(duì)于一般項(xiàng)目而言已經(jīng)足夠。
安裝命令：
npm install gulp-tinypng --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var tinypng = require('gulp-tinypng'); // 使用TinyPN API壓縮圖片
gulp.task('tinypng', function(){
return gulp.src('src/images/**/*') // 源地址
.pipe(tinypng('填寫TinyPN API KEY'))
.pipe(gulp.dest('dist/images')); // 輸出路徑
});
執(zhí)行命令：
gulp tinypng
4.3 其他
1. 緩存代理(gulp-cache)：
緩存操作過(guò)的文件羡亩，當(dāng)文件修改時(shí)摩疑，只編譯當(dāng)前修改的文件。其余文件直接從緩存中調(diào)取畏铆，提高效率雷袋。
缺點(diǎn)：因?yàn)槭蔷彺妫匀绻募粍h除辞居，但沒(méi)及時(shí)清理緩存文件時(shí)楷怒，就會(huì)導(dǎo)致被刪除的文件又從緩存中讀取了出來(lái)，所謂成也蕭何敗也蕭何瓦灶。
安裝命令：
npm install gulp-cache --save-dev
基礎(chǔ)配置：
var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var imagemin = require('gulp-imagemin'), // 圖片壓縮
pngquant = require('imagemin-pngquant'), // 深度壓縮
pngquant = require('imagemin-cache'), // 緩存代理
clean = require('imagemin-clean'); // 文件清理
// imagemin 圖片壓縮（利用cache）
gulp.task('images', function(){
return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑鸠删、并進(jìn)行文件匹配
.pipe(cache(imagemin({
progressive: true, // 無(wú)損壓縮JPG圖片
svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox屬性
use: [pngquant()] // 使用pngquant插件進(jìn)行深度壓縮
})))
.pipe(gulp.dest('dist/images')); // 輸出路徑
});
// 清理緩存文件
gulp.task('clean', function (done) {
return cache.clearAll(done);
});
5. 匹配規(guī)則（Match Files）
Gulp使用 node-glob 模塊，借助 minimatch 庫(kù)倚搬，將glob表達(dá)式(glob expressions)轉(zhuǎn)換成JavaScript正則表達(dá)式(JavaScript RegExp) 冶共，從而實(shí)現(xiàn)文件匹配功能。我們所看到的**和*都是其所提供的語(yǔ)法：
* 匹配文件路徑中的0個(gè)或多個(gè)字符，但不會(huì)匹配路徑分隔符捅僵，除非路徑分隔符出現(xiàn)在末尾家卖。
** 匹配路徑中的0個(gè)或多個(gè)目錄及其子目錄，需要單獨(dú)出現(xiàn)庙楚，即它左右不能有其他東西了上荡。如果出現(xiàn)在末尾，也能匹配文件馒闷。
? 匹配文件路徑中的一個(gè)字符(不會(huì)匹配路徑分隔符)酪捡。
[...] 匹配方括號(hào)中出現(xiàn)的字符中的任意一個(gè)，當(dāng)方括號(hào)中第一個(gè)字符為^或!時(shí)纳账，則表示不匹配方括號(hào)中出現(xiàn)的其他字符中的任意一個(gè)逛薇。
!(pattern|pattern|pattern) 匹配任何與括號(hào)中給定的任一參數(shù)一致的都不匹配的。
?(pattern|pattern|pattern) 匹配括號(hào)中給定的任一參數(shù)0次或1次疏虫。
+(pattern|pattern|pattern) 匹配括號(hào)中給定的任一參數(shù)至少1次永罚。
*(a|b|c) 匹配括號(hào)中給定的任一參數(shù)0次或多次。
@(pattern|pat*|pat?erN) 匹配括號(hào)中給定的任一參數(shù)1次卧秘。
用實(shí)例來(lái)加深理解：
* 能匹配 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翅敌，能用來(lái)匹配所有的目錄和文件
**/*.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，因?yàn)橹挥袉?code>**單獨(dú)出現(xiàn)才能匹配多級(jí)目錄
?.js 能匹配 a.js , b.js , c.js
a?? 能匹配 a.b , abc蚯涮，但不能匹配 ab/治专，因?yàn)樗粫?huì)匹配路徑分隔符
[xyz].js 只能匹配 x.js , y.js , z.js，不會(huì)匹配 xy.js , xyz.js 等恋昼，整個(gè)中括號(hào)只代表一個(gè)字符
[^xyz].js 能匹配 a.js , b.js , c.js等看靠，不能匹配 x.js , y.js , z.js
當(dāng)有多種匹配模式時(shí)可以使用數(shù)組：
// 使用數(shù)組的方式來(lái)匹配多種文件
gulp.src(['js/*.min.js','css/*.min.css'])
使用數(shù)組的方式還有一個(gè)好處就是可以很方便的使用排除模式，在數(shù)組中的單個(gè)匹配模式前加上!即是排除模式液肌，它會(huì)在匹配的結(jié)果中排除這個(gè)匹配，要注意一點(diǎn)的是不能在數(shù)組中的第一個(gè)元素中使用排除模式：
// 使用數(shù)組的方式來(lái)匹配多種文件
gulp.src(['*.js','!b*.js']) // 匹配所有js文件鸥滨，但排除掉以b開頭的js文件
gulp.src(['!b*.js',*.js]) // 不會(huì)排除任何文件嗦哆，因?yàn)榕懦Ｊ讲荒艹霈F(xiàn)在數(shù)組的第一個(gè)元素中
此外，還可以使用展開模式婿滓。展開模式以花括號(hào)作為定界符老速，根據(jù)它里面的內(nèi)容，會(huì)展開為多個(gè)模式凸主，最后匹配的結(jié)果為所有展開的模式相加起來(lái)得到的結(jié)果橘券。展開的例子如下：
a{b,c}d 會(huì)展開為 abd,acd
a{b,}c 會(huì)展開為 abc,ac
a{0..3}d 會(huì)展開為 a0d,a1d,a2d,a3d
a{b,c{d,e}f}g 會(huì)展開為 abg,acdfg,acefg
a{b,c}d{e,f}g 會(huì)展開為 abdeg,acdeg,abdeg,abdfg
6. 注意事項(xiàng)（Attention）
- watch 的時(shí)候路徑不要用 './path'，直接使用 '/path' 即可，不然會(huì)導(dǎo)致新增文件無(wú)法被 watch旁舰。
- gulp 對(duì)于 one after one 的任務(wù)鏈锋华，需要加 return，比如 gulp clean
參考資料：
An introduction to Gulp
gulp API 介紹
擴(kuò)展資料：
Gulp API docs
gulp-cheatsheet
