為什么使用

代碼同步

browser-sync 使用方法

browser-sync-spa

gulp-livereload 實(shí)時(shí)刷新

AngularJS

eslint-plugin-angular

gulp-angular-filesort

結(jié)合使用以gulp-inject正確的順序注入您的AngularJS應(yīng)用程序文件（腳本），以擺脫所有Uncaught Error: [$injector:modulerr]荚醒。為了正確工作箭券，每個(gè)角度文件需要具有唯一命名的模塊和setter語法（帶括號(hào)）挺举，即angular.module('myModule', [])助析。

gulp-angular-templatecache 將html模板緩存到$templateCache中

gulp-ng-annotate //是一個(gè)處理angularjs依賴注入的插件昙沦，它的用法如下

gulp.task('build-app-js', function () {
    return gulp.src('src/app/**/*.js')
        .pipe(ngAnnotate({single_quotes: true}))
        .pipe(gulp.dest(buildDir + '/js/app'));
});

正常我們寫angular代碼是這樣子的

angular.module('app', [])
    .controller('AppCtrl', ['$scope', function($scope) {
        // 別的代碼
    }])

但使用了這個(gè)插件之后哈雏，每一個(gè)依賴注入的項(xiàng)就不用再寫兩遍了，如

angular.module('app', [])
    .controller('AppCtrl', function($scope) {
        // 別的代碼
    })

gulp-ng-annotate會(huì)幫我們生成帶中括號(hào)的寫法 兴蒸，這樣子是不是節(jié)省了很多重復(fù)工作呢视粮？尤其是在注入的服務(wù)非常多的時(shí)候，可以少寫很多代碼橙凳，并且也不用擔(dān)心順序有沒有寫錯(cuò)蕾殴。

文件操作

gulp-filter 過濾文件

Example:https://github.com/hjzheng/CUF_meeting_knowledge_share/blob/master/2015-11-10/gulpfile.js
gulp-filter可以把stream里的文件根據(jù)一定的規(guī)則進(jìn)行篩選過濾。比如gulp.src中傳入匹配符匹配了很多文件痕惋，可以把這些文件pipe給gulp-filter作二次篩選区宇，如gulp.src('/.js').pipe($.filter(/a/.js))娃殖，本來選中了所有子文件下的js文件值戳，經(jīng)過篩選后變成名為a的子文件夾下的js文件。那有人要問了炉爆，為什么不直接將需要的篩選傳入gulp.src堕虹，干嘛要多篩選一步呢？這里面有兩種情況：

gulp.src與$.filter中間可能需要?jiǎng)e的處理芬首，比如我對(duì)所有文件做了操作1以后赴捞，還需要篩選出一部分做操作2。
第二種情況就要談到gulp-filter的另外一個(gè)特性：篩選之后還可以restore回去郁稍。比如我對(duì)所有文件做了操作1赦政，篩選了一部分做操作2，最后要把所有的文件都拷貝到最終的位置耀怜。代碼如下：

var filter = $.filter('**/a/*.js');
gulp.src('**/*.js')
    .pipe(action1())
    .pipe(filter)
    .pipe(action2())
    .pipe(filter.restore())
    .pipe(gulp.dest('dist'))

可以看到恢着，如果沒有restore這個(gè)操作，那么拷貝到最終位置的文件將只包含被過濾出來的文件财破，這樣一restore掰派，所有的文件都被拷貝了。

gulp-flatten 當(dāng)拷貝文件時(shí)左痢，不想拷貝目錄時(shí)使用

例子：https://segmentfault.com/q/1010000004266922
gulp-flatten非常實(shí)用靡羡，可能知道別的庫中flatten函數(shù)的同學(xué)已經(jīng)猜到它是干嘛的了。比如gulp.src('*/.js')匹配了很多文件俊性，包括a/b/c.js略步，d/e.js，f/g/h/i/j/k.js定页，l.js趟薄，這些文件的層級(jí)都不一樣，一旦我們將這個(gè)文件pipe給$.flatten()拯勉，則所有的文件夾層級(jí)都會(huì)去掉竟趾，最終的文件將是c.js憔购，e.js，k.js岔帽，l.js玫鸟，在一些場(chǎng)景下還是非常有用的。

JS/CSS自動(dòng)注入

gulp-replace

gulp-rev 把靜態(tài)文件名改成hash的形式犀勒。

gulp-rev-append 給頁面引用的靜態(tài)文件增加hash后綴屎飘，避免被瀏覽器緩存

效果如下:

"/css/base.css" => "/dist/css/base.css?v=1d87bebe"    
"/js/mod.js" => "/dist/mod.js?v=61e0be79"    
"/images/bg.png"  => "/images/bg.png?v=35c3af8134"

gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest贾费。json 后替換對(duì)應(yīng)的文件名稱钦购。

gulp-useref 與 gulp-rev、gulp-rev-replace

這三個(gè)工具之所以放在一起講褂萧，是因?yàn)樗鼈円话愣际且黄鹗褂玫难禾摇Ｋ鼈円鉀Q什么問題呢？通過上面的wiredep也好导犹，gulp-inject也好唱凯，插入了一堆JS、CSS文件到HTML中谎痢，一旦部署到生產(chǎn)環(huán)境磕昼，這么多文件必然是要合并壓縮的。光是壓縮還不夠节猿，為了解決緩存問題票从，每次合并壓縮后要給最終的文件加hash，這樣每次文件內(nèi)容一變動(dòng)滨嘱，hash也會(huì)跟著變動(dòng)峰鄙，就不存在瀏覽器依然使用緩存的老文件的問題。這樣得到最終的文件以后九孩，肯定還要將這個(gè)文件替換回HTML中去先馆，一大堆的script和link標(biāo)簽替換成最終合并壓縮帶hash的版本。

前面啰啰嗦嗦的一大堆工作就是這三個(gè)插件要解決的問題了躺彬。首先煤墙，gulp-useref根據(jù)注釋將HTML中需要合并壓縮的區(qū)塊找出來，對(duì)區(qū)塊內(nèi)的所有文件進(jìn)行合并宪拥。注意：它只負(fù)責(zé)合并仿野，不負(fù)責(zé)壓縮！所以合并出來的文件我們要自行壓縮她君，壓縮以后調(diào)用gulp-rev負(fù)責(zé)在文件名后追加hash脚作。最后調(diào)用gulp-rev-replace負(fù)責(zé)把最終的文件名替換回HTML中去。扯了大半天，還是直接上例子吧球涛。先來看看HTML中的注釋：

<!-- build:css static/styles/lib.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css static/styles/app.css -->
<!-- inject:css -->
<!-- endinject -->
<!-- endbuild -->
<!-- build:js static/js/lib.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js static/js/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- endbuild -->

gulp-useref識(shí)別的就是build開頭的注釋劣针，build后面首先跟的是類型擴(kuò)展名，然后后面的路徑就是build區(qū)塊中的所有文件進(jìn)行合并后的文件路徑亿扁，這個(gè)相對(duì)路徑是相對(duì)于這個(gè)HTML的路徑捺典。上面的例子中我們用build區(qū)塊把bower和inject進(jìn)來的文件包起來，這些文件就可以被gulp-useref合并了从祝。再來看gulp中useref相關(guān)task的定義：

var assets = $.useref.assets({searchPath: 'app/src/'});
var cssFilter = $.filter('**/*.css');
var jsAppFilter = $.filter('**/app.js');
var jslibFilter = $.filter('**/lib.js');
return gulp
    .src('index.html')
    .pipe(assets)
    .pipe(cssFilter)
    .pipe($.csso())
    .pipe(cssFilter.restore())
    .pipe(jsAppFilter)
    .pipe($.uglify())
    .pipe(getHeader())
    .pipe(jsAppFilter.restore())
    .pipe(jslibFilter)
    .pipe($.uglify())
    .pipe(jslibFilter.restore())
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe(gulp.dest('dist'));

首先一上來襟己，先調(diào)用$.useref.assets()函數(shù)，這個(gè)函數(shù)返回一個(gè)stream牍陌，包含已經(jīng)合并后的文件擎浴。可以嘗試在第9行后面加上前面介紹過的gulp-print插件.pipe($.print())毒涧，打印出stream里的文件贮预，發(fā)現(xiàn)就是前面HTML中4個(gè)build注釋塊后面的4個(gè)文件。注意這里調(diào)用的時(shí)候跟了一個(gè)searchPath的參數(shù)链嘀，它的用處就是指定從哪個(gè)路徑開始尋找build區(qū)塊底下的文件萌狂。比如build區(qū)塊底下有這么一行<script src="static/js/a.js"></script>，那最終gulp-useref將從這個(gè)路徑app/src/static/js/a.js找到這個(gè)文件怀泊。第3到5行定義了3個(gè)filter，這主要是為了后面壓縮準(zhǔn)備的误趴。下面正式看stream的pipe流程霹琼。先選出要處理的HTML文件，然后調(diào)用剛才得到的assets得到合并后的4個(gè)文件凉当，第10到12行篩選出合并后的CSS文件進(jìn)行壓縮（壓縮類插件下篇文章再講）枣申，第13到16行篩選出app.js進(jìn)行壓縮，第17到19行篩選出lib.js進(jìn)行壓縮看杭。之所以要區(qū)別對(duì)待app.js和lib.js忠藤，是因?yàn)閍pp.js是我們自己寫的代碼，壓縮后要加上header（第15行楼雹，使用前面介紹過的gulp-header插件）模孩，而lib.js是第三方的各種庫，直接壓縮即可贮缅。后面調(diào)用gulp-rev給壓縮后的4個(gè)文件加hash榨咐，然后調(diào)用assets.restore()將src源換回HTML文件，這是為了后面調(diào)用$.useref()谴供，因?yàn)?.useref()做替換的src源是HTML文件块茁，同樣后面調(diào)用gulp-rev-replace將帶hash的文件替換回HTML，它要求的src源也必須是HTML文件。這里的順序很重要数焊，因?yàn)檫@幾個(gè)插件接受的源不一樣永淌，gulp-rev接受的是JS、CSS文件佩耳，而gulp-useref和gulp-rev-replace接受的是HTML仰禀。還有一個(gè)問題：gulp-rev-replace是怎么知道gulp-rev進(jìn)行hash前后的文件名對(duì)應(yīng)關(guān)系呢？其實(shí)gulp-rev會(huì)生成一個(gè)manifest的文件蚕愤，內(nèi)容是類似下面的JSON：

{
    "static/styles/lib.css": "static/styles/lib-d41d8cd98f.css"
    "static/js/lib.js": "static/js/lib-273c2cin3f.js"
}

當(dāng)然這個(gè)文件默認(rèn)是不會(huì)生成在文件系統(tǒng)里的答恶，可以通過.pipe($.rev.manifest())將這個(gè)文件保存到本地。有了這個(gè)文件萍诱，gulp-rev-replace甚至可以脫離gulp-rev獨(dú)立工作哦悬嗓！

gulp-inject //文件的注入

個(gè)人理解： 就是把 css，js全部利用這個(gè)插件添加到 index.html 頁面里裕坊，不需要手動(dòng)去添加

<script src="../bower_components/jquery/dist/jquery.js"></script>
<link src="css/index.css"/>

<!-- inject:js -->  
<script src="scripts/app.js"></script>  
<!-- endinject -->  

壓縮

gulp-zip

gulp-mini-css 壓縮css使用的

gulp-mini-html

gulp-useref 用uglify壓縮js

url:https://www.npmjs.com/package/gulp-useref
說到優(yōu)化的時(shí)候包竹，我們需要想到：壓縮，拼接籍凝。也就是減少體積和HTTP次數(shù)周瞎。

開發(fā)者面臨的主要問題是很難按照正確的順序合并文件。

<body>
  <!-- other stuff -->
  <script src="js/lib/a-library.js"></script>
  <script src="js/lib/another-library.js"></script>
  <script src="js/main.js"></script>
</body>

由于文件路徑的的不同饵蒂，使用 https://www.npmjs.com/package/gulp-concat 等插件非常困難声诸。

慶幸的是， gulp-useref 解決了這個(gè)問題退盯。

gulp-useref會(huì)將多個(gè)文件拼接成單一文件彼乌，并輸出到相應(yīng)目錄。

<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

可以是js,css,或者remove渊迁。如果你設(shè)為remove,Gulp將不會(huì)生成文件慰照。

指定產(chǎn)出路徑。

我們想最終產(chǎn)出main.min.js琉朽《咀猓可以這樣寫：

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

gulp-uglify //壓縮、混淆js文件用的

基本使用

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
 
gulp.task('jsmin', function () {
    gulp.src('src/js/index.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

壓縮多個(gè)js文件

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
 
gulp.task('jsmin', function () {
    gulp.src(['src/js/index.js','src/js/detail.js']) //多個(gè)文件以數(shù)組形式傳入
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

匹配符“!”箱叁，“”墅垮，“*”，“{}”

var gulp = require('gulp'),
    uglify= require('gulp-uglify');
 
gulp.task('jsmin', function () {
    //壓縮src/js目錄下的所有js文件
    //除了test1.js和test2.js（**匹配src/js的0個(gè)或多個(gè)子文件夾）
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) 
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

指定變量名不混淆改變

var gulp = require('gulp'),
    uglify= require('gulp-uglify');
 
gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
            //mangle: true,//類型：Boolean 默認(rèn)：true 是否修改變量名
            mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆關(guān)鍵字
        }))
        .pipe(gulp.dest('dist/js'));
});

gulp-uglify其他參數(shù) 具體參看

var gulp = require('gulp'),
    uglify= require('gulp-uglify');
 
gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
            mangle: true,//類型：Boolean 默認(rèn)：true 是否修改變量名
            compress: true,//類型：Boolean 默認(rèn)：true 是否完全壓縮
            preserveComments: 'all' //保留所有注釋
        }))
        .pipe(gulp.dest('dist/js'));
});

gulp-css-base64

把小圖片的URL替換為Base64編碼圖片蝌蹂。

gulp-imagemin 壓縮圖片

壓縮圖片文件（包括PNG噩斟、JPEG、GIF和SVG圖片）
github：https://github.com/sindresorhus/gulp-imagemin

基本使用

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
 
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

gulp-imagemin其他參數(shù) 具體參看

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
 
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認(rèn)：3  取值范圍：0-7（優(yōu)化等級(jí)）
            progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染
            multipass: true //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化
        }))
        .pipe(gulp.dest('dist/img'));
});

深度壓縮圖片

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //確保本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');
 
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件
        }))
        .pipe(gulp.dest('dist/img'));
});

只壓縮修改的圖片孤个。

壓縮圖片時(shí)比較耗時(shí)剃允，在很多情況下我們只修改了某些圖片，沒有必要壓縮所有圖片，使用”gulp-cache”只壓縮修改的圖片斥废，沒有修改的圖片直接從緩存文件讀冉烽埂（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    //確保本地已安裝gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');
    
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

注意：它只負(fù)責(zé)合并牡肉，不負(fù)責(zé)壓縮

編譯

gulp-sass 編譯sass用的

gulp-sourcemaps 編譯sass時(shí)生成額外的.map文件用的

代碼分析

gulp-eslint

工具

gulp-load-plugins 模塊化管理捧灰。可以加載package.json文件中所有的gulp模塊

gulp-autoprefixer 自動(dòng)添加css前綴

基本用法

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');
 
gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化屬性值 默認(rèn)：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前綴 默認(rèn)：true 
        }))
        .pipe(gulp.dest('dist/css'));
});

gulp-autoprefixer的browsers參數(shù)詳解

• last 2 versions: 主流瀏覽器的最新兩個(gè)版本
• last 1 Chrome versions: 谷歌瀏覽器的最新版本
• last 2 Explorer versions: IE的最新兩個(gè)版本
• last 3 Safari versions: 蘋果瀏覽器最新三個(gè)版本
• Firefox >= 20: 火狐瀏覽器的版本大于或等于20
• iOS 7: IOS7版本
• Firefox ESR: 最新ESR版本的火狐
• 5%: 全球統(tǒng)計(jì)有超過5%的使用率

gulp-gh-pages 使用gulp來把markdown生成html文檔并上傳到git pages上

chalk

del 清除文件

gulp-plumber

gulp 的錯(cuò)誤處理有點(diǎn)坑统锤，假如發(fā)生錯(cuò)誤進(jìn)程就掛了毛俏。相對(duì)的解決辦法不少，但是這個(gè)是我個(gè)人比較推薦的饲窿，比特么在容易出錯(cuò)的地方寫錯(cuò)誤監(jiān)聽靠譜煌寇。所以這個(gè)插件可以阻止 gulp 插件發(fā)生錯(cuò)誤導(dǎo)致進(jìn)程退出并輸出錯(cuò)誤日志。

estraverse 遍歷函數(shù)

gulp-prompt 將交互式控制臺(tái)提示添加到gulp

gulp-protractor

gulp-rename 修改文件名稱逾雄。比如有時(shí)我們需要把a(bǔ)pp.js改成app.min.js阀溶，瞬間高級(jí)了

gulp-shell

gulp-size 顯示您的項(xiàng)目的規(guī)模

gulp-util

gulp-util帶有很多方便的函數(shù)，其中最常用的應(yīng)該就是log了鸦泳。$.util.log()支持傳入多個(gè)參數(shù)银锻，打印結(jié)果會(huì)將多個(gè)參數(shù)用空格連接起來。它與console.log的區(qū)別就是所有$.util.log的結(jié)果會(huì)自動(dòng)帶上時(shí)間前綴做鹰。另外击纬，它還支持顏色，如$.util.log($.util.colors.magenta('123'));打印出來的123是品紅色的誊垢。其實(shí)$.util.colors就是一個(gè) chalk的實(shí)例掉弛，而chalk是專門用來處理命令行打印著色的一個(gè)工具。

http-proxy-middleware

lodash

main-bower-files

uglify-save-license

wiredep

wiredep就是wire dependence的意思喂走，它的作用就是把bower.json中聲明的dependence自動(dòng)的包含到HTML中去。
要插入文件谋作，wiredep需要解決兩個(gè)問題：

插入的位置：wiredep通過識(shí)別HTML中的注釋來識(shí)別插入位置芋肠，如

<!-- bower:css -->
<!-- endbower -->
<!-- bower:js -->
<!-- endbower -->

不同類型的文件被插入到不同的區(qū)塊。

插入什么文件：要插入的文件列表自然來自bower.json遵蚜，每個(gè)bower安裝的依賴庫帖池，根目錄下邊都有一個(gè)自己的bower.json文件，其中的main字段指明了使用這個(gè)庫需要包含的文件吭净，wiredep最終包含的文件列表就來自這個(gè)字段睡汹。有些情況下，庫自身的bower.json的main字段可能會(huì)多包含文件或少包含文件寂殉，如果想要定制這個(gè)列表囚巴，則可以在自己的bower.json中使用overrides字段，如下面的代碼覆蓋了mdi這個(gè)庫的main字段。

"overrides": {
  "mdi": {
    "main": [
      "css/materialdesignicons.css"
    ]
  }
},

wiredep插件支持很多參數(shù)彤叉，常用的主要有兩個(gè)：

bowerJson：指定bower.json的內(nèi)容庶柿，注意這個(gè)字段不是bower.json文件的位置，這個(gè)參數(shù)需要使用require后的結(jié)果賦值：require('bower.json')秽浇。
directory：指定存放bower安裝后的依賴包的路徑浮庐，通常是bower_components。注意最終插入到HTML中的文件列表的路徑是index.html文件相對(duì)于本文件夾的相對(duì)路徑柬焕。
使用wiredep也比較簡(jiǎn)單审残，直接把它傳入到stream中即可，如gulp.src('index.html').pipe(wiredep(options))斑举。

gulp-order 對(duì)src中的文件按照指定順序進(jìn)行排序

本地整理搅轿，留作備份。