前言

本文默認(rèn)你已經(jīng)安裝好node環(huán)境，并且熟悉node命令蔬浙，和window cd命令猪落。

gulp簡介

基于nodejs流的自動化構(gòu)建工具，可以快速構(gòu)建項目并減少頻繁的I/0操作畴博。你可以利用gulp插件完成各種自動化任務(wù)：測試笨忌、檢查、合并俱病、壓縮官疲、格式化、瀏覽器自動刷新亮隙、部署文件生成途凫，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。官方中文網(wǎng)傳送門咱揍。

gulp安裝

NPM是基于命令行的node包管理工具颖榜，它可以將node的程序模塊安裝到項目中,
我們利用npm來安裝gulp.

• 在命令行輸入：
  npm install gulp -g
• 運行時注意查看命令行有沒有錯誤信息，安裝完成之后煤裙，利用命令查看gulp版本號是否被正確安裝：
  gulp --version
  或者
  gulp -v
• 安裝到項目本地
  先CD到你的項目根目錄
  npm install gulp --save-dev
  　　--save-dev保存gulp到項目依賴文件package.json的devDependencies里面掩完。
• 安裝錯誤處理
  • 連不上服務(wù)器。由于npm大多包在github或者國外網(wǎng)站上硼砰，如果網(wǎng)絡(luò)不好（鐵通/移動長寬等）且蓬，訪問不了，還有可能被墻了（你懂得）题翰。這時候你可以使用淘寶鏡像：
    npm install gulp -g --registry=https://registry.npm.taobao.org
    你也可以使用淘寶的命令CNPM
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install gulp -g
    有些包可能淘寶上也沒恶阴，這時候你需要翻墻了诈胜，請自備梯子。
    淘寶鏡像具體教程：淘寶鏡像傳送門
  • 權(quán)限不夠冯事。
    wiondows請使用管理員模式打開CMD,linux下命令前面加 sudo,
    sudo npm install gulp -g
  • windows下莫名錯誤焦匈。
    如果網(wǎng)絡(luò)良好，還是安裝出現(xiàn)莫名其妙錯誤昵仅，那么你就應(yīng)該換Git安裝了缓熟。
    window平臺下建議使用git安裝。

gulp 使用

在你的項目根目錄下創(chuàng)建文件gulpfile.js文件：

var gulp = require('gulp');
gulp.task('default', function() { 
     // 將你的默認(rèn)的任務(wù)代碼放在這
  });

運行g(shù)ulp:

 $ gulp

默認(rèn)的名為 default 的任務(wù)（task）將會被運行摔笤，在這里由于沒有任何代碼够滑，所以這個任務(wù)并未做任何事情。
　　想要單獨執(zhí)行特定的任務(wù)（task）吕世，請輸入 gulp <task> 彰触，上面等價于：

   $ gulp default

gulp API簡介

• gulp.src（gobs[, options])
  輸出符合匹配條件的文件，將返回一個Vinyl files 的 stream 它可以被 piped 到別的插件中命辖。詳細(xì)查看

       gulp.src('src/js/*.js') //模糊匹配src/js文件夾下所有js文件
          .pipe( concat('app.js'))//
          .pipe(gulp.dest('pub/dist/js'));//合并后文件路徑

• gulp.dest(path[, options])
  　　能被 pipe 進(jìn)來况毅，并且將會寫文件。并且重新輸出所有數(shù)據(jù)吮龄，因此你可以將它 pipe 到多個文件夾俭茧。如果某文件夾不存在咆疗，將會自動創(chuàng)建它漓帚。

  gulp.src('./client/templates/*.jade') 
     .pipe(jade()) 
     .pipe(gulp.dest('./build/templates'))
     .pipe(minify()) 
     .pipe(gulp.dest('./build/minified_templates'));

• gulp.task(name[, deps], fn)
  定義一個使用 Orchestrator 實現(xiàn)的任務(wù)（task）。
  • name
    任務(wù)的名字午磁，如果你需要在命令行中運行你的某些任務(wù)尝抖，那么，請不要在名字中使用空格迅皇。
  • deps
    類型： Array
    一個包含任務(wù)列表的數(shù)組昧辽，這些任務(wù)會在你當(dāng)前任務(wù)運行之前完成。
    注意： 你的任務(wù)是否在這些前置依賴的任務(wù)完成之前運行了登颓？請一定要確保你所依賴的任務(wù)列表中的任務(wù)都使用了正確的異步執(zhí)行方式：使用一個 callback搅荞，或者返回一個 promise 或 stream。
  • fn
    該函數(shù)定義任務(wù)所要執(zhí)行的一些操作框咙。通常來說咕痛，它會是這種形式：
    gulp.src().pipe(someplugin())
    返回一個 stream或者promise

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 
  return gulp.src('client/**/*.js') 
             .pipe(minify())
             .pipe(gulp.dest('build'));
});

接受一個callback

// 在 shell 中執(zhí)行一個命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) { 
     // 編譯 Jekyll 
    exec('jekyll build', function(err) { 
            if (err) return cb(err); // 返回 error 
           cb(); // 完成 task 
     }); 
});

注意： 默認(rèn)的，task 將以最大的并發(fā)數(shù)執(zhí)行喇嘱，也就是說茉贡，gulp 會一次性運行所有的 task 并且不做任何等待。如果你想要創(chuàng)建一個序列化的 task 隊列者铜，并以特定的順序執(zhí)行腔丧，你需要做兩件事：
給出一個提示放椰，來告知 task 什么時候執(zhí)行完畢，
并且再給出一個提示愉粤，來告知一個 task 依賴另一個 task 的完成砾医。

var gulp = require('gulp');
// 返回一個 callback，因此系統(tǒng)可以知道它什么時候完成
gulp.task('one', function(cb) { 
// 做一些事 -- 異步的或者其他的 
     cb(err); // 如果 err 不是 null /undefined衣厘，則會停止執(zhí)行藻烤，注意，這樣代表執(zhí)行失敗了
});
// 定義一個所依賴的 task 必須在這個 task 執(zhí)行之前完成
gulp.task('two', ['one'], function() {
 // 'one' 完成后
});
gulp.task('default', ['one', 'two']);

• gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
  監(jiān)視文件头滔，并且可以在文件發(fā)生改動時候做一些事情怖亭。它總會返回一個 EventEmitter 來emit change事件。
  示例：

gulp.watch('js/**/*.js', function(event) { 
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

文件變動后執(zhí)行一個或者多個task的坤检。有js文件變動兴猩，執(zhí)行jshint驗證任務(wù)再刷新瀏覽器：

gulp.watch('js/**/*.js', ['jshint']).on('change', plugins.livereload.changed);

• gulp.src通配符匹配
  foo.js指明特定某個文件
  *.js匹配當(dāng)前目錄下的所有js文件,不指名擴展名則匹配所有類型
  */*.js匹配所有**第一層子文件夾**的js文件,第二層請用*/*/.js
**/*.js匹配**所有文件夾層次**下的js文件, 包括當(dāng)前目錄
  ?匹配文件路徑中的一個字符(不會匹配路徑分隔符)
  [...]匹配方括號中出現(xiàn)的字符中的任意一個，當(dāng)方括號中第一個字符為^或!時早歇，則表示不匹配方括號中出現(xiàn)的其他字符中的任意一個.
  !匹配任何與括號中給定的任一模式都不匹配的
  下面以一系列例子來加深理解
  能匹配 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,因為只有單*單獨出現(xiàn)才能匹配多級目錄
  ?.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
• 項目實例倾芝，項目結(jié)構(gòu)如下
  
  Paste_Image.png
  
  'modules/*/client/css/**/*.scss' 能匹配blog,core，manage三個目錄下client/css目錄下任意.scss文件箭跳，不管client/css/下有幾層;
  ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'] 匹配根目錄下server.js,config目錄下所有js文件晨另，modules所有子目錄下的server文件夾所有js文件。
  ['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],匹配module下除core之外的子目錄下server/route下所有js文件谱姓。
  ['server/routes/**/*.js', '!./server/routes/app.js'] 這種是無法排除routes/app.js借尿，因為前后匹配表達(dá)式不一直，正確應(yīng)為['server/routes/**/*.js', '!server/routes/app.js']
  如果你想了解更多請參考gulp進(jìn)階傳送門

gulp使用

3.1 gulp之文件合并--gulp-concat

為了減少網(wǎng)絡(luò)請求屉来，通常會對文件夾進(jìn)行合并路翻。

• 安裝
  　　gulp-concat插件安裝和gulp安裝雷同，不再贅述茄靠。
• 基本使用

var gulp = require('gulp'),
    concat = require('gulp-concat');//引入gulp及插件gulp-concat
    gulp.task('concat', function () {//定義任務(wù)concat
       gulp.src('src/js/*.js') //模糊匹配src/js文件夾下所有js文件
          .pipe(concat('app.js'))//合并后的文件名
         .pipe(gulp.dest('pub/dist/js'));//合并后文件路徑
   });

• 執(zhí)行任務(wù)
  gulp concat
• 結(jié)果

Paste_Image.png

上圖為合并壓縮重命名后的文件名茂契。下面會一一講到。

3.2 gulp之js文件壓縮gulp-uglify

為了減少文件大小慨绳，通常會對文件進(jìn)行壓縮處理掉冶。

• 安裝
  　　gulp-uglify插件安裝和gulp安裝雷同，不再贅述脐雪。
• 基本使用

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
 
   gulp.task('min', function () {
       gulp.src(['src/js/index.js','src/js/app.js']) //多個文件以數(shù)組形式或模糊匹配傳入.
          .pipe(uglify({
            mangle: true,//類型：Boolean 默認(rèn)：true 是否修改變量名
            compress: true//類型：Boolean 默認(rèn)：true 是否完全壓縮
        }))
        .pipe(gulp.dest('pub/dist/js'));//壓縮后存放路勁
});

uglify具體參數(shù)查看

• 執(zhí)行任務(wù)
  gulp min
  執(zhí)行成功后可以看到pub/dist/js目錄下生成了新的文件

3.3 gulp之css文件壓縮gulp-minify-css

• 基本使用

var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
gulp.task('Cssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

• 配合其他插件使用

 var gulpLoadPlugins = require('gulp-load-plugins'),
       cssver = require('gulp-make-css-url-version'),
      plugins = gulpLoadPlugins();//load-plugins一次加載所有依賴的gulp插件
   gulp.task('Cssmin', function () {
      return gulp.src('modules/*/client/css/*.css')
             .pipe(cssver()) //給css文件里引用文件加版本號（文件MD5）
             .pipe(cssmin({
               advanced: false,//類型：Boolean 默認(rèn)：true [是否開啟高級優(yōu)化（合并選擇器等）]
               compatibility: 'ie7',//類型：String 默認(rèn)：''or'*' [啟用兼容模式厌小； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式喂江，'*'：IE9+兼容模式]
               keepBreaks: true//類型：Boolean 默認(rèn)：false [是否保留換行]
        }))
       .pipe(gulp.dest('public/dist'));
    });

插件gulp-make-css-url-version 給css文件里引用url加版本號（根據(jù)引用文件的md5生產(chǎn)版本號）
.class(background:url(../img/1.jpg?v=je82o9djZTYljusqe%2B3D%4B5A) no-repeat)

• 執(zhí)行任務(wù)
  gulp Cssmin

3.4 gulp之圖片壓縮gulp-imagemin

壓縮圖片文件（包括PNG召锈、JPEG、GIF和SVG圖片）

• 基本使用

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

• 帶參數(shù)获询，配合其他插件涨岁，具體參數(shù)查看

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
  gulp.task('Imagemin', function () {
       gulp.src('src/img/*.{png,jpg,gif,ico}')
          .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認(rèn)：3  取值范圍：0-7（優(yōu)化等級）
            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('public/dist'));
});

• 由于有些圖片比較大拐袜，所以可以進(jìn)行深度壓縮，和只壓縮修改的圖片梢薪，沒修改就從緩存讀取

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'), //自動加載插件
    pngquant = require('imagemin-pngquant'),//深度壓縮插件
    plugins = gulpLoadPlugins(); //實例化
  gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(plugins.cache(plugins.imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant()] //使用pngquant 插件深度壓縮
        })))
        .pipe(gulp.dest('dist/img'));
});

3.5 自動加載插件gulp-load-plugins

上面很多例子都用到這個插件蹬铺。由于我們項目中有時候會用到很多插件，如果都用require進(jìn)來秉撇，我們得寫很多行require代碼甜攀，雖然這樣沒問題，但是會顯得很冗長琐馆，所以gulp-load-plugins應(yīng)運而生规阀，幫我們加載這些插件。

• 基本使用
  假定我們項目有如下插件：

  
  
  Paste_Image.png
  
  

  我們可以通過一行代碼就加載進(jìn)來

var gulp = require('gulp'),
plugins = require('gulp-load-plugins')();

• gulp-load-plugins命令規(guī)則為駝峰命名瘦麸，比如我們引用gulp-rename就可以plugins.rename替代谁撼，去掉gulp-前綴，再使用駝峰命名滋饲。

• 注意： gulp-load-plugins在我們需要用到某個插件的時候厉碟，才去加載那個插件，并不是一開始就全部加載進(jìn)來屠缭。因為gulp-load-plugins是依賴package.json文件來加載插件的箍鼓，所以請確保你需要的插件已經(jīng)加入package.json文件并已經(jīng)安裝完畢。

3.6 gulp之HTML文件壓縮gulp-htmlmin

可以壓縮頁面javascript呵曹、css款咖，去除頁面空格、注釋逢并，刪除多余屬性等操作

• 基本用法

var gulp = require('gulp'),
     plugins = require('gulp-load-plugins')(); //自動插件引用
     //htmlmin = require('gulp-htmlmin'); 單獨引用
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除所有空格屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(plugins.htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

3.7 gulp之less文件編譯(gulp-less)

將less文件編譯成css之剧，當(dāng)有l(wèi)ess文件發(fā)生改變自動編譯less郭卫，并保證less語法錯誤或出現(xiàn)異常時能正常工作并提示錯誤信息砍聊。

• 基本使用

var gulp = require('gulp'),
    less = require('gulp-less'); 
gulp.task('less', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

一般會使用通配符自動編譯less

• 多模塊編譯less

var gulp = require('gulp'),
     less = require('gulp-less'),
     //本地安裝gulp-minify-css [npm install gulp-minify-css --save-dev]
    cssmin = require('gulp-minify-css');
gulp.task('testLess', function () {
    gulp.src('src/less/**/*.less')
        .pipe(less())
        .pipe(cssmin()) 
         //兼容IE7及以下需設(shè)置compatibility屬性 
        //.pipe(cssmin({compatibility: 'ie7'}))
        .pipe(gulp.dest('pub/css'));
});

• 自動編譯
  如果每修改一次less，就要編譯一次贰军，顯然是很繁瑣的玻蝌，所以應(yīng)當(dāng)監(jiān)聽less改動，當(dāng)有l(wèi)ess文件發(fā)生改變時使其自動編譯词疼。配合實時重載live-reload插件輕松監(jiān)聽俯树。
• 新建less任務(wù)編譯less文件

var gulp = require('gulp'),
     plugins = require('gulp-load-plugins')(); //自動插件引用
    gulp.task('less', function () {
        return gulp.src('src/less/**/*.less')
            .pipe(plugins.less()) //編譯
           .pipe(plugins.rename(function (file) {
           //把編譯后less文件重命名為css文件
           file.dirname = file.dirname.replace(path.sep + 'less', path.sep + 'css');
    }))
    .pipe(gulp.dest('./modules/'));//編譯后存放目錄
});

• 建立監(jiān)聽事件

 plugins.livereload.listen(); //啟動live-reload監(jiān)聽
gulp
.watch('src/less/**/*.less', ['sass', 'csslint'])
.on('change', plugins.livereload.changed);

官方實時重載和CSS注入實例傳送門

3.8 gulp之sass文件編譯(gulp-sass)

sass和less同為css預(yù)處理器，gulp處理方法也差不多

• 用法

var gulp = require('gulp'), 
plugins = require('gulp-load-plugins')(); //自動插件引用
 gulp.task('less', function () { 
    return gulp.src('src/less/**/*.sass') 
      .pipe(plugins.sass()) //編譯sass
      .pipe(plugins.rename(function (file) {
    //重命名為css
       file.dirname = file.dirname.replace(path.sep + 'scss', path.sep + 'css'); 
    }))
    .pipe(gulp.dest('./modules/'));//指定存放路徑
});

3.9 gulp之js語法檢查(gulp-jshint)

根據(jù)jshint規(guī)則檢查語法錯誤贰盗，規(guī)范項目編碼许饿。詳細(xì)規(guī)則請查看JHS詳細(xì)規(guī)則

• 基本使用

var gulp = require('gulp'), 
jshint = require("gulp-jshint"); 
gulp.task('jsLint', function () { 
   gulp.src('client/**/*.js')
     .pipe(jshint()) 
     .pipe(jshint.reporter()); // 輸出檢查結(jié)果
});

• 項目實例
  具體規(guī)則在項目根目錄的.jshintrc文件里面

var gulp = require('gulp'), 
plugins = require('gulp-load-plugins')(); //自動插件引用
gulp.task('jshint', function () {
    return gulp.src('client/**/*.js')
       .pipe(plugins.jshint())
       .pipe(plugins.jshint.reporter('default'))// 調(diào)用default輸出結(jié)果
       .pipe(plugins.jshint.reporter('fail')); //調(diào)用fail輸出檢查錯誤
});

3.10 gulp之css語法檢查(gulp-csslint)

根據(jù)規(guī)則檢查CSS語法

• 基本用法

var gulp = require('gulp'), 
plugins = require('gulp-load-plugins')(); 
gulp.task('csslint', function (done) {
   return gulp.src(d'client/**/*.css')
    .pipe(plugins.csslint('.csslintrc'))//加載配置文件
    .pipe(plugins.csslint.reporter())
    .pipe(plugins.csslint.reporter(function (file) {
      if (!file.csslint.errorCount) { //有錯誤，輸出具體錯誤
        done();
      }
    }));
});

3.11 gulp之重命名(gulp-rename)

這個插件上面已經(jīng)過了好多次了舵盈。

• 基本用法
  同時輸出一個壓縮過和一個未壓縮的文件

var gulp = require('gulp'),
 rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
DEST = 'build/';
gulp.task('default', function() { 
   return gulp.src('foo.js') // 這會輸出一個未壓縮過的版本 
      .pipe(gulp.dest(DEST)) // 這會輸出一個壓縮過的并且重命名未 foo.min.js 的文件
     .pipe(uglify())
     .pipe(rename({ extname: '.min.js' })) 
     .pipe(gulp.dest(DEST));
});

3.12 gulp之測試gulp-mocha

mocha 是一個簡單陋率、靈活有趣的 JavaScript 測試框架球化，用于 Node.js 和瀏覽器上的 JavaScript 應(yīng)用測試

• 基本使用

var gulp = require('gulp');
var mocha = require('gulp-mocha');
gulp.task('default', function() { 
  return gulp.src(['test/test-*.js'], { read: false }) 
          .pipe(mocha({ reporter: 'spec', 
                globals: { should: require('should') }
               }));
});

• 文件改動監(jiān)聽

var gulp = require('gulp');
var mocha = require('gulp-mocha');
var gutil = require('gulp-util'); //gulp工具庫
gulp.task('mocha', function() {
    return gulp.src(['test/*.js'], { read: false }) 
      .pipe(mocha({ reporter: 'list' })) 
      .on('error', gutil.log);}); //記錄錯誤
gulp.task('watch-mocha', function() { 
     gulp.watch(['lib/**', 'test/**'], ['mocha']);});

3.13 gulp之自動刷新gulp-livereload

監(jiān)聽到文件改動自動刷新前端頁面，不需要F5瓦糟。
上面好幾個例子已經(jīng)使用過了,下面簡單介紹下筒愚。

• 基本用法

var gulp = require('gulp'), 
     plugins = require('gulp-load-plugins')(); //自動插件引用
gulp.task('sass', function() {
     gulp.src('sass/**/*.scss') 
        .pipe(plugins.sass()) 
        .pipe(gulp.dest('css'))
        .pipe(plugins.livereload());});
gulp.task('watch', function() { 
    plugins.livereload.listen(); //要在這里調(diào)用listen()方法
    gulp.watch('sass/**/*.scss', ['sass']);
});

3.14 gulp之自動重啟node程序gulp-nodemon

監(jiān)聽到node服務(wù)文件改動自動重啟node，官方文檔傳送門

• 基本用法

gulp.task('nodemon', function () {
  return plugins.nodemon({
    script: 'server.js',
    nodeArgs: ['--debug'],
    ext: 'js,html', //文件擴展名
    env: { 'NODE_ENV': 'development'菩浙，//環(huán)境-開發(fā)環(huán)境（生產(chǎn)環(huán)境）
    watch: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js']巢掺，
    tasks: ['jshint'] //任務(wù)
  });
});

3.15 gulp之其他插件

• run-sequence
  讓gulp任務(wù)之間可以單獨執(zhí)行，解除任務(wù)之間相互依賴劲蜻，增強tasks復(fù)用性
• 基本用法

  var runSequence = require('run-sequence')陆淀；
  gulp.task('default', function(done) {
     runSequence('env:dev', 'lint', ['nodemon', 'watch'], done);
   // env:dev', 'lint', 'nodemon', 'watch'均是任務(wù)
  });

• browser-sync
  靜態(tài)文件服務(wù)器，同時也支持瀏覽器自動刷新先嬉，和gulp-livereload功能差不多倔约。
• 基本使用

var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() { 
    browserSync({ 
        files: "**", 
          server: { 
               baseDir: "./" 
                 } 
     });
});
gulp.task('default', ["browser-sync"]);

• 刪除文件del
  你也許會想要在編譯文件之前刪除一些文件,del 是一個node模塊，github傳送門
• 基本用法

var gulp = require('gulp');
var del = require('del');
gulp.task('clean:tmp', function (cb) {
     del([ 'dist/report.csv', 
      // 使用通配模式來匹配 `tmp` 文件夾中的所有東西
        'dist/tmp/**/*', 
// 我們不希望刪掉這個文件坝初，使用浸剩！排除
       '!dist/tmp/temp.json' 
       ], cb);
});
gulp.task('default', ['clean:tmp']);

結(jié)語

關(guān)于gulp用法以及常用插件就講解到這里，如果錯誤請指正鳄袍。