1. gulp.src(globs[, options])

Grunt.js和Gulp.js工作方式

• Grunt主要是以文件為媒介來運行它的工作流的，比如在Grunt中執(zhí)行完一項任務(wù)后，會把結(jié)果寫入到一個臨時文件中，然后可以在這個臨時文件內(nèi)容的基礎(chǔ)上執(zhí)行其它任務(wù)，執(zhí)行完成后又把結(jié)果寫入到臨時文件中，然后又以這個為基礎(chǔ)繼續(xù)執(zhí)行其它任務(wù)...就這樣反復下去。

• 而在Gulp中，使用的是Nodejs中的stream(流)，首先獲取到需要的stream，然后可以通過stream的pipe()方法把流導入到你想要的地方，比如Gulp的插件中，經(jīng)過插件處理后的流又可以繼續(xù)導入到其他插件中，當然也可以把流寫入到文件中。

gulp.src()方法正是用來獲取流的，但要注意這個流里的內(nèi)容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲著原始文件的路徑、文件名、內(nèi)容等信息。

語法：

 gulp.src(globs[, options])

• globs
  • 類型: String 或 Array
  • 描述: 所要讀取的 glob 或者包含 globs 的數(shù)組。

這個參數(shù)是文件匹配模式(類似正則表達式)，用來匹配文件路徑(包括文件名)，當然這里也可以直接指定某個具體的文件路徑。當有多個匹配模式時，該參數(shù)可以為一個數(shù)組。

• options[可選參數(shù)]
  • 類型：`Object-
  • 描述：通過 glob-stream 所傳遞給 node-glob 的參數(shù)。

• options.buffer
  • 類型：Boolean 默認值： true
  • 如果該項被設(shè)置為 false，那么將會以 stream 方式返回 file.contents 而不是文件 buffer 的形式。這在處理一些大文件的時候?qū)苡杏谩?strong>注意：插件可能并不會實現(xiàn)對 stream 的支持。
• options.read
  • 類型： Boolean 默認值： true
  • 如果該項被設(shè)置為 false， 那么 file.contents 會返回空值（null），也就是并不會去讀取文件。
• options.base
  • 類型： String
  • 默認值： 將會加在 glob 之前
    如, 請想像一下在一個路徑為 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

gulp.src('client/js/**/*.js') 
// 匹配 'client/js/somedir/somefile.js' 并且將 `base` 解析為 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/somedir/somefile.js' 用'build'替換base

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build')); 
 // 寫入 'build/js/somedir/somefile.js'用'build'替換base

2. gulp.dest(path[, options])

• path
  • 類型： String or Function
  • 文件將被寫入的路徑（輸出目錄）。也可以傳入一個函數(shù)，在函數(shù)中返回相應路徑，這個函數(shù)也可以由 vinyl 文件實例 來提供。
• options [可選參數(shù)]

gulp的使用流程一般是這樣子的：首先通過gulp.src()方法獲取到我們想要處理的文件流，然后把文件流通過pipe方法導入到gulp的插件中，最后把經(jīng)過插件處理后的流再通過pipe方法導入到gulp.dest()中，gulp.dest()方法則把流中的內(nèi)容寫入到文件中，這里首先需要弄清楚的一點是，我們給gulp.dest()傳入的路徑參數(shù)，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導入到它的文件流自身的文件名。

所以 生成的文件名是由導入到它的文件流決定的，即使我們給它傳入一個帶有文件名的路徑參數(shù)，然后它也會把這個文件名當做是目錄名，要想改變文件名，可以使用插件gulp-rename

gulp.dest(path)生成的文件路徑是我們傳入的path參數(shù)后面再加上gulp.src()中有通配符開始出現(xiàn)的那部分路徑。例如：

var gulp = reruire('gulp');
//有通配符開始出現(xiàn)的那部分路徑為 **/*.js
gulp.src('script/**/*.js')
    .pipe(gulp.dest('dist')); //最后生成的文件路徑為 dist/**/*.js
//如果 **/*.js 匹配到的文件為 jquery/jquery.js ,則生成的文件路徑為 dist/jquery/jquery.js

用gulp.dest()把文件流寫入文件后，文件流仍然可以繼續(xù)使用。

3.gulp.task(name[, deps], fn)

定義一個使用 Orchestrator 實現(xiàn)的任務(wù)（task）。

gulp.task('somename', function() {
  // 做一些事
});

• name:任務(wù)的名字，如果你需要在命令行中運行你的某些任務(wù)，那么，請不要在名字中使用空格。
• deps:一個包含任務(wù)列表的數(shù)組，這些任務(wù)會在你當前任務(wù)運行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

• fn:該函數(shù)定義任務(wù)所要執(zhí)行的一些操作。通常來說，它會是這種形式：gulp.src().pipe(someplugin())。

異步任務(wù)支持

有三種方法可以實現(xiàn)任務(wù)異步執(zhí)行：

• 接受一個 callback

gulp.task('one',function(cb){
  //one是一個異步執(zhí)行的任務(wù)
    setTimeout(function(){
      console.log('one is done')
      cb();  //執(zhí)行回調(diào)，表示這個異步任務(wù)已經(jīng)完成
    },5000);
});
//這時two任務(wù)會在one任務(wù)中的異步操作完成后再執(zhí)行執(zhí)行
gulp.task('two',['one'],function(){
  console.log('two is done');
});

• 返回一個 stream(流)對象

gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(dosomething()) //dosomething()中有某些異步操作
      .pipe(gulp.dest('build'));
    return stream;
});
gulp.task('two',['one'],function(){
  console.log('two is done');
});

• 返回一個promise對象，例如

var Q = require('q'); //一個著名的異步處理的庫 https://github.com/kriskowal/q
gulp.task('one',function(cb){
     var deferred = Q.defer();
      // 做一些異步操作
      setTimeout(function() {
          deferred.resolve();
      }, 5000);
  return deferred.promise;
});
gulp.task('two',['one'],function(){
      console.log('two is done');
});

4. gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

用來監(jiān)視文件的變化，當文件發(fā)生變化后，我們可以利用它來執(zhí)行相應的任務(wù)，例如文件壓縮等。

gulp.watch(glob[, opts], tasks)

• glob 為要監(jiān)視的文件匹配模式，規(guī)則和用法與gulp.src()方法中的glob相同。
• opts 為一個可選的配置對象，通常不需要用到
• tasks 為文件變化后要執(zhí)行的任務(wù)，為一個數(shù)組

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp.watch(glob[, opts, cb])

cb參數(shù)為一個函數(shù)。每當監(jiān)視的文件發(fā)生變化時，就會調(diào)用這個函數(shù),并且會給它傳入一個對象，該對象包含了文件變化的一些信息，type屬性為變化的類型，可以是added,changed,deleted；path屬性為發(fā)生變化的文件的路徑

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //變化類型 added為新增,deleted為刪除，changed為改變 
    console.log(event.path); //變化的文件的路徑
}); 

參考文章
前端構(gòu)建工具gulpjs的使用介紹及技巧
gulp API 文檔