一、簡介

        gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器；她不盡能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她，我們不盡可以很愉快的編寫程式碼，而且大大提高我們的工作效率。

        gulp是基於node.js的自動任務執行器，她能自動化地完成JavaScript/coffee/sass/less/html/image/css等檔案的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成。並監聽檔案在改動後重復指定的這些步驟。在實現上，她借鑑了lunix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上十分簡單。通過本文，我們將學習如何使用gulp來改變開發流程，從而使開發更加快速高效。

    gulp和grunt非常類似，但相比於grunt的頻繁IO操作，gulp的流操作，能更快更便捷的完成專案構建工作。

這裡不做介紹，請參考以下連結：

gulp中文文件：https://www.gulpjs.com.cn/docs/getting-started/

gulp詳細教程：http://www.ydcss.com/archives/18#lesson2

三、gulp主要引數

gulp.src(globs[, options])

輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的陣列（array of globs）的檔案。 將返回一個 

 gulp.src返回了stream。

gulp.dest(path[, options])

能被 pipe 進來，並且將會寫檔案。並且重新輸出（emits）所有資料，因此你可以將它 pipe 到多個資料夾。如果某資料夾不存在，將會自動建立它。

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

檔案被寫入的路徑是以所給的相對路徑根據所給的目標目錄計算而來。類似的，相對路徑也可以根據所給的 base 來計算。

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

定義一個使用 Orchestrator 實現的任務（task）。

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

name

任務的名字，如果你需要在命令列中執行你的某些任務，那麼，請不要在名字中使用空格。

deps

型別： Array

一個包含任務列表的陣列，這些任務會在你當前任務執行之前完成。

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

注意： 你的任務是否在這些前置依賴的任務完成之前運行了？請一定要確保你所依賴的任務列表中的任務都使用了正確的非同步執行方式：使用一個 callback，或者返回一個 promise 或 stream。

fn

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

非同步任務支援

任務可以非同步執行，如果 fn 能做到以下其中一點：

接受一個 callback

// 在 shell 中執行一個命令
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
  });
});

返回一個 stream

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

返回一個 promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 執行非同步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

注意： 預設的，task 將以最大的併發數執行，也就是說，gulp 會一次性執行所有的 task 並且不做任何等待。如果你想要建立一個序列化的 task 佇列，並以特定的順序執行，你需要做兩件事：

• 給出一個提示，來告知 task 什麼時候執行完畢，
• 並且再給出一個提示，來告知一個 task 依賴另一個 task 的完成。

對於這個例子，讓我們先假定你有兩個 task，"one" 和 "two"，並且你希望它們按照這個順序執行：

1. 在 "one" 中，你加入一個提示，來告知什麼時候它會完成：可以再完成時候返回一個 callback，或者返回一個 promise 或 stream，這樣系統會去等待它完成。

2. 在 "two" 中，你需要新增一個提示來告訴系統它需要依賴第一個 task 完成。

因此，這個例子的實際程式碼將會是這樣：

var gulp = require('gulp');

// 返回一個 callback，因此係統可以知道它什麼時候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 非同步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，則會停止執行，且注意，這樣代表執行失敗了
});

// 定義一個所依賴的 task 必須在這個 task 執行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成後
});

gulp.task('default', ['one', 'two']);

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

監視檔案，並且可以在檔案發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。

1、gulp-less：

    使用gulp-less外掛將less檔案編譯成css，當有less檔案發生改變自動編譯less，並保證less語法錯誤或出現異常時能正常工作並提示錯誤資訊。

1.1、基本使用

1.2、編譯多個less檔案

3.3、匹配符“!”，“*”，“**”，“{}”

1.4、呼叫多模組（編譯less後壓縮css）