0、前言
??當(dāng)下最熱門的前端構(gòu)建工具當(dāng)屬gulp和webpack，所謂“工欲善其事捷雕，必先利其器”，一個好的構(gòu)建工具能大大提升開發(fā)效率壹甥，而好的構(gòu)建工具往往是由一系列插件組合而成救巷，本篇記錄gulp常用插件。
1句柠、gulp常用API
- gulp.src(globs[, options])
注意：- globs是字符串或數(shù)組浦译，表示待處理文件的路徑棒假，注意該路徑相對于gulpfile.js所在位置；
- globs寫法中精盅，“app/**/*.js”表示app目錄下的任意子目錄下的后綴為js的所有文件帽哑；
-
options配置中最常用的是base:'somedir'，指定與不指定base的區(qū)別在于處理后的文件的位置叹俏。請看下圖：
base的作用
指定了base妻枕，那么在build中構(gòu)建后的文件目錄結(jié)構(gòu)跟somedir的目錄結(jié)構(gòu)相同
- gulp.dest(path[,options])
注意：- path可以是路徑字符串或函數(shù)，當(dāng)是函數(shù)時(shí)粘驰，該函數(shù)必須返回字符串佳头；
- options中可以配置cwd和mode，用的不多晴氨。
- gulp.task(name[, deps], fn)
- deps數(shù)組康嘉，表示前置依賴的任務(wù)，即在運(yùn)行name任務(wù)之前運(yùn)行的任務(wù)籽前，一般這些任務(wù)是異步的（使用一個 callback亭珍，或者返回一個 promise 或 stream），大部分情況下是使用返回stream的形式來實(shí)現(xiàn)異步枝哄，更多信息
stream實(shí)現(xiàn)異步
- deps數(shù)組康嘉，表示前置依賴的任務(wù)，即在運(yùn)行name任務(wù)之前運(yùn)行的任務(wù)籽前，一般這些任務(wù)是異步的（使用一個 callback亭珍，或者返回一個 promise 或 stream），大部分情況下是使用返回stream的形式來實(shí)現(xiàn)異步枝哄，更多信息
- gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
監(jiān)聽文件肄梨，一旦文件發(fā)生改變就會執(zhí)行tasks數(shù)組中指定的任務(wù)，或者執(zhí)行cb函數(shù)挠锥，并觸發(fā)watcher的change事件
2众羡、gulp簡單插件
- gulp-imagemin 壓縮圖片
- gulp-sass 將scss文件轉(zhuǎn)為css
- gulp-postcss 與autoprefixer配合使用
- gulp-open 默認(rèn)瀏覽器打開指定頁面
- gulp-htmlmin 最小化html文件
- gulp-minify-css 最小化css（gulp-clean-css也是）
- gulp-uglify 混淆js文件
- gulp-concat 合并js,css文件
3、復(fù)雜插件
- gulp-replace 對指定文件內(nèi)容進(jìn)行替換蓖租，可以用正則
- gulp-usemin 將html中外鏈的css和js文件
- gulp-zip 將文件打包成zip
- gulp-sequence 串行執(zhí)行任務(wù)粱侣，相對于gulp.task中依賴的任務(wù)是并行執(zhí)行的
- gulp-rev-all 對js或css文件加MD5戳，緩存用
4蓖宦、其他node模塊
- del 刪除指定目錄下所有文件
- autoprefixer 自動加瀏覽器前綴
- browser-sync 文件內(nèi)容變化瀏覽器自動刷新
- yargs 處理node命令傳入的參數(shù)
- cross-env 跨platform的命令處理齐婴，用法：cross-env NODE_ENV=production webpack --config build/webpack.config.js，若不加cross-env稠茂，window系統(tǒng)下報(bào)錯
5柠偶、注意點(diǎn)
場景：任務(wù)A依賴任務(wù)B，C
- 1睬关、前置任務(wù)B诱担，C是并發(fā)執(zhí)行的
- 2、前置任務(wù)B电爹，C執(zhí)行完畢后才開始執(zhí)行A
- 3蔫仙、若想讓B，C串行執(zhí)行藐不，可使用插件gulp-sequ
