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中找各種插件，進行上手試驗啦