Gulp 方法

Gulp有5個基本方法：src、dest、task、run、watch

---

Gulp.src()

     gulp模塊的src方法，用於產生數據流。它的參數表示索要處理的文件，通常有如下幾種形式：

• js/app.js：指定確切的文件名
• js/*.js：某個目錄全部後綴爲js的文件
• js/**/*.js：某個目錄及其全部子目錄中的全部後綴爲js的文件
• !js/app.js：除了js/app.js之後的全部文件
• *.+(js|css)：匹配項目更目錄下，全部後綴爲js/css的文件

     src方法的參數還能夠是一個數組，用來指定多個成員：

 

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

 

---

Gulp.dest()

     gulp模塊的dest方法，能夠用來傳遞文件，同時寫入文件到指定目錄。能夠重複的發送傳遞給它的數據，所以能夠講文件傳送到多個目錄中：

 

     

gulp.src('app/templates/*.jade')
       .pipe(jade())
       .pipe(gulp.dest('/dist/templates'))
       .pipe(minify())
       .pipe(gulp.dest('/dist/minified_templates'));

 

---

Gulp.task()

     gulp模塊的task方法，用於定義具體的任務。它的第一個參數是人物名，第二個參數是任務函數。

     舉個栗子：

 

     

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
 
gulp.task('minify',function(){
      gulp.src('app/*.html')
          .pipe(htmlmin({collapseWhitespace:true}))
          .pipe(gulp.dest('dist'))
});

 

     上述建立了一個壓縮html的任務，在命令行模式中使用下列命令繼續執行

 

gulp minify

 

     task方法還能夠指定按順序運行的一組任務：

     

gulp.task('build',['css','js','imgs']);

 

     上述代碼先指定了 build 任務，它按次序由css、js、imgs三個任務組成。

ps:因爲每一個任務都是異步調用，因此沒有辦法保證js任務開始的時間，就是css任務結束的時間。

     若是但願各個任務嚴格按次序運行，能夠把前一個任務寫成後一個任務的依賴模塊：

 

gulp.task('css',['minify'],function(){
    //代碼
})

 

     上面代碼代表，css任務依賴minify任務，因此css必定會在minify運行完成後再運行。

     若是一個任務的名字爲default，就代表它是「默認任務」，在命令行直接輸入

gulp

命令，就會運行該任務：

 

gulp.task('default',function(){
     //your default task
})

 

---

Gulp.run()

     gulp模塊的run方法，表示要執行的任務。可能會使用單個參數的形式傳遞多個任務。

     ps:任務是儘量多的並行執行，而且可能不會按照指定的順序執行。

 

gulp.run('scripts','copyfiles','builddocs');
 
gulp.run('scripts','copyfiles','builddocs',function(err){
     //全部任務完成，或者出發錯誤而終止
});

     可使用gulp.run在其餘任務中運行任務。也能夠在默認任務（default）中使用gulp.run組織多個更小的任務爲一個大任務。

---

 

Gulp.watch()

     gulp模塊的watch方法，用於指定須要監視的文件。一旦這些文件發生變更，就運行指定任務：

 

gulp.task('watch',function(){
     gulp.watch('app/tamplates/*.jade',['build']);
})

 

     上面代碼指定，一旦templates目錄下後綴爲.jade的文件發生變化，就運行build任務。

     watch方法也能夠用毀掉函數，代替指定的任務：

 

gulp.watch('app/templates/*.jade',function(event){
     console.log('Event type:' + event.type);
     console.log('Event path:' + event.path);
})

 

     另外一種寫法是watch方法所監控的文件發生變化時（修改，增長，刪除文件），會出發change事件，能夠對change事件指定回調函數：

 

var watcher = gulp.watch('app/templates/*.jade',['build']);
 
gulp.on('change',function(event){
     console.log('Event type:' + event.type);
     console.log('Event path:' + event.path);
})

 

     

     除了change事件，watch方法還能夠觸發如下事件：

• end：回調函數運行完畢後觸發。
• error：發生錯誤時觸發。
• ready：當開始監聽文件時觸發。
• nomatch：沒有匹配的監聽文件時觸發。

     watcher對象還包含其餘一些方法：

• watcher.end()：中止watcher對象，不會再調用任務或回調函數。
• watcher.files()：返回watcher對象監視的文件
• watcher.add(glob)：增長所要監視的文件，它還能夠附件第二個參數，表示回調函數。
• watcher.remove(filepath)：從watcher對象中移走一個監視的文件。

 

學完gulp的這些方法就能夠到npmjs.com中找各類插件，進行上手試驗啦