1. src()
gulp模組的src方法，用於產(chǎn)生資料流。它的參數(shù)表示所要處理的文件，這些指定的文件會(huì)轉(zhuǎn)換成資料流。

js/app.js 指定確切的文件名
js/*.js 某個(gè)目錄所有后綴名為js的文件
js/**/*.js 某個(gè)目錄及其所有子目錄中所有后綴名為js的文件
！js/app.js 除了js/app.js以外所有文件
*.+(js css)匹配項(xiàng)目根目錄下，所有后綴名為js或css的文件

src方法的參數(shù)也可以是數(shù)組，用來指定多個(gè)成員

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

2 dest()
dest方法將管道的輸出寫入文件，同時(shí)將這些輸出繼續(xù)輸出，所以可以依序呼叫多次dest方法，將輸出寫入多個(gè)目錄。如果有目錄不存在，將會(huì)重建。

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

dest方法也可以接受第二個(gè)參數(shù)，表示配置物件

gulp.dest('build',{
 cwd:'./app',
 mode:'0644'})

配置物件有兩個(gè)欄位。 cwd欄位指定寫入路徑的基準(zhǔn)目錄，預(yù)設(shè)是目前目錄；mode欄位指定寫入檔案的權(quán)限，預(yù)設(shè)是0777.
3.task()
task方法用於定義具體的任務(wù)。它的第一個(gè)參數(shù)是任務(wù)名，第二個(gè)參數(shù)是任務(wù)函數(shù)。

gulp.task('greet',function(){
  console.log('Hello world');
});

task方法也可以指定按順序執(zhí)行的一組任務(wù)

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

指定任務(wù)build，它由css，js，imgs三個(gè)任務(wù)所組成。 task方法會(huì)並發(fā)執(zhí)行這三個(gè)任務(wù)。注意，每個(gè)任務(wù)都是非同步調(diào)用，所以沒有辦法保證js任務(wù)的開始運(yùn)行的時(shí)間。

如果希望各個(gè)任務(wù)嚴(yán)格按照順序運(yùn)行，可以把掐一個(gè)任務(wù)寫成後一個(gè)任務(wù)的依賴模組。

gulp.task('css',['greet'],function(){
  //deal with css here});

css任務(wù)依賴greet任務(wù)，所以css一定會(huì)在greet運(yùn)行完成後在運(yùn)行。

task方法的回呼函數(shù)，也可以接受一個(gè)函數(shù)作為參數(shù)，這對(duì)執(zhí)行非同步任務(wù)非常有用.

//執(zhí)行shell命令var exec=require('child_process').exec;
gulp.task('jekyll',function(cb){//build jekyllexec('jekyll build',function(err){
 if(err) return cb(err);//return error
 cb();//finished task})
})

如果一個(gè)任務(wù)的名字為default，就表示它是預(yù)設(shè)任務(wù)，在命令列直接輸入gulp命令，就會(huì)執(zhí)行該任務(wù)。

gulp.task('default',function(){
  //default task})//或者gulp.task('default',['styles','jshint','watch']);

執(zhí)行的時(shí)候，直接使用gulp，就會(huì)執(zhí)行styles，jshint，watch三個(gè)任務(wù)。

4 watch()
watch方法用來指定需要監(jiān)視的檔案。一旦這些文件發(fā)生變動(dòng)，就執(zhí)行指定任務(wù)。

gulp.task('watch',function(){
  gulp.watch('templates/*.tmpl.html',['build']);
});

程式碼指定，一旦templates目錄中的範(fàn)本檔案發(fā)生變化，就會(huì)執(zhí)行build任務(wù)。

watch方法也可以用回呼函數(shù)，取代指定的任務(wù)

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

另一種寫法是watch方法所監(jiān)控的檔案發(fā)生變化時(shí)(修改、增加、刪除檔案)，就會(huì)觸發(fā)change事件，可以對(duì)change事件指定回呼函數(shù)

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

除了change事件，watch方法還可能觸發(fā)以下事件
end 回呼函數(shù)運(yùn)行完畢時(shí)觸發(fā)
#error 發(fā)生錯(cuò)誤時(shí)觸發(fā)
ready 當(dāng)開始監(jiān)聽檔案時(shí)觸發(fā)
nomatch 沒有符合的監(jiān)聽檔案時(shí)觸發(fā)

watcher對(duì)象也包含其他一些方法
watcher.end() 停止watcher對(duì)象，不會(huì)再呼叫任務(wù)或回呼函數(shù)
watcher.files() 傳回watcher物件監(jiān)視的檔案
watcher.add(glob)增加所要監(jiān)視的文件，它也可以附件第二個(gè)參數(shù)，表示回呼函數(shù)
watcher.remove(filepath) 從watcher物件移除一個(gè)監(jiān)聽的檔案

5.gulp-livereload模組
gulp-livereload模組用於自動(dòng)刷新瀏覽器，反映原始碼的最新變更。它除了模組以外，還需要在瀏覽器中安裝插件，用於配合原始碼變更。

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

程式碼用來監(jiān)視less文件，一旦編譯完成，就會(huì)自動(dòng)刷新瀏覽器。

6 gulp-load-plugins模組

一般情況下，gulpfile.js中的模組需要一個(gè)個(gè)載入

var gulp=require('gulp'),
    jshint=require('gulp-jshint'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');
 gulp.task('js',function(){  return gulp.src('js/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('default'))
           .pipe(uglify())
           .pipe(concat('app.js'))
           .pipe(gulp.dest('build'));
})

程式碼中除了gulp模組以外，還載入另外三個(gè)模組

這種載入的寫法比較麻煩，使用gulp-load-plugins模組，可以載入package.json檔案中所有的gulp模組。

var gulp=require('gulp'),
 gulpLoadPlugins=require('gulp-load-plugins'),
 plugins=gulpLoadPlugins();
 gulp.task('js',function(){ return gulp.src('js/*.js')
  .pipe(plugins.jshint())
  .pipe(plugins.jshint.reporter('default'))
  .pipe(plugins.uglify())
  .pipe(plugins.concat('app.js'))
  .pipe(gulp.dest('build'));
})

本文說明了gulp模組的方法，更多相關(guān)內(nèi)容請(qǐng)關(guān)注php中文網(wǎng)。

相關(guān)推薦：

js將html產(chǎn)生為圖片，並儲(chǔ)存在本機(jī)

js中函數(shù)的三種定義方式

JS 中的''真假''

以上是gulp模組的方法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！