gulp安裝

1. 全局安裝 gulp：

$ npm install --global gulp

2. 作為項目的開發(fā)依賴（devDependencies）安裝：

$ npm install gulp --save-dev 

3. 在項目根目錄下創(chuàng)建一個名為 gulpfile.js 的文件并導(dǎo)入組件：

var gulp = require('gulp'),//導(dǎo)入gulp modul
      minifycss = require('gulp-minify-css'),//css壓縮組件
      concat = require('gulp-concat'),//組合組件
      uglify = require('gulp-uglify'),//js壓縮組件
      rename = require('gulp-rename')//重命名組件
      jshint=require('gulp-jshint')   //js檢查組件
     notify=require('gulp-notify');   //提示組件
gulp.task('default', function() {
  // 將你的默認的任務(wù)代碼放在這
});

4. 運行 gulp：

$ gulp

默認的名為 default 的任務(wù)（task）將會被運行，在這里，這個任務(wù)并未做任何事情。
想要單獨執(zhí)行特定的任務(wù)（task），請輸入 gulp <task> <othertask>。

gulp.src

• gulp.src(globs[, options])
  輸出符合提供的匹配模式或者匹配模式的數(shù)組的文件（.html,[ .js, .css ,.json, .jade ]）,返回一個文件流，它可以被輸（pipe）送到其他插件中

gulp.src('client/templates/*.jade')
  .pipe(jade())//jade是源于nodejs的html模板引擎
  .pipe(minify())//壓縮
  .pipe(gulp.dest('build/minified_templates'));//輸出到名為build下minified_templates的文件夾

• globs
  類型： String 或 Array
  要操作的文件的路徑或包含文件路徑的數(shù)組
• options
  類型：object
  通過 glob-stream 所傳遞給 node-glob 的參數(shù)。gulp還 增加了一些額外的選項參數(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 之前 (請看 glob2base)
  在一個路徑為 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'
gulp.src('client/js/**/*.js', { base: 'client' }) 
         .pipe(minify()) 
         .pipe(gulp.dest('build')); // 寫入 'build/js/somedir/somefile.js'

gulp.dest

• gulp.dest(path[, options])
  能被輸送( pipe) 進來，并且將會寫文件。并且重新輸出（emits）所有數(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'));

文件被寫入的路徑是以所給的相對路徑根據(jù)所給的目標(biāo)目錄計算而來。類似的，相對路徑也可以根據(jù)所給的 base 來計算。

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

• options
  類型： Object

  • options.cwd
    類型： String 默認值： process.cwd()
    輸出目錄的 cwd 參數(shù)，只在所給的輸出目錄是相對路徑時候有效。
  • options.mode
    類型： String 默認值： 0777
    八進制權(quán)限字符，用以定義所有在輸出目錄中所創(chuàng)建的目錄的權(quán)限。

gulp.task

• gulp.task(name[, deps], fn)
  定義一個使用 Orchestrator 實現(xiàn)的任務(wù)（task）。

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

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

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

注意： 為了任務(wù)不在這些前置依賴的任務(wù)完成之前運行，請一定要確保你所依賴的任務(wù)列表中的任務(wù)都使用了正確的異步執(zhí)行方式：使用一個 回調(diào)函數(shù)callback，或者返回一個 promise 或 stream。

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

• 任務(wù)異步執(zhí)行
  如果fn接受了一個 callback、返回一個 stream、返回一個 promise，任務(wù)就可以異步執(zhí)行。

// 在 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
  });
});

gulp.task('somename', function() {
     var stream = gulp.src('client/**/*.js')
         .pipe(minify())
         .pipe(gulp.dest('build'));
         return stream;
});

var Q = require('q');
gulp.task('somename', function() {
     var deferred = Q.defer();
     // 執(zhí)行異步的操作
     setTimeout(function() {
        deferred.resolve();
      }, 1);
      return deferred.promise;
});

注意： 默認的，task 將以最大的并發(fā)數(shù)執(zhí)行，也就是說，gulp 會一次性運行所有的 task 并且不做任何等待。如果你想要創(chuàng)建一個序列化的 task 隊列，并以特定的順序執(zhí)行，你需要做兩件事：

• 給出一個提示，來告知 task 什么時候執(zhí)行完畢，
• 并且再給出一個提示，來告知一個 task 依賴另一個 task 的完成。