在Javascript的開發過程中，經常會遇到一些重複性的任務，比如合併文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等。通常，我們需要使用不同的工具，來完成不同的任務，既重複勞動又非常耗時。grunt，gulp都是為了解決這個問題而發明的工具，可以幫助我們自動管理和運行各種任務，很多人認為，在操作上，它要比Grunt簡單。

安裝

gulp需要全局安裝，然後再在項目的開發目錄中安裝為本地模塊。先進入項目目錄，運行下面的命令。

npm install -g gulpnnnpm install --save-dev gulpn

gulpfile.js

項目根目錄下創建一個名為 gulpfile.js 的文件，此文件為gulp的配置文件：

var gulp = require(gulp);nngulp.task(mini, function() {n // 將你的默認的任務代碼放在這n});n

然後使用下面命令即可：

$ gulp minin

如果任務名為默認的default，則直接使用gulp命令即可。

思想

gulp.task(js, function () {n return gulp.src(js/*.js)n .pipe(jshint())n .pipe(uglify())n .pipe(concat(app.js))n .pipe(gulp.dest(build));n});n

gulp是基於管道的思想，所以可以看出，gulp首先通過src讀取文件產生數據流，然後經過一系列pipe操作，最後通過dest方法將數據流寫入文件build.js中。

API

src

用於產生數據流，參數為符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。

glob模式是匹配路徑與文件的模式，類似正則表達式。下面為部分語法：

• *

  匹配該路徑段中 0 個或多個任意字元，

• ?

  匹配該路徑段中 1 個任意字元，

• [...]

  匹配該路徑段中在指定範圍內字元，

• !(pattern|pattern|pattern)
  匹配除所給出的模型以外的情況，

• ?(pattern|pattern|pattern)

  匹配所給出的模型中的 0 個或任意 1 個，

• +(pattern|pattern|pattern)
  匹配所給出的模型中的 1 個或者多個，

• *(pattern|pattern|pattern)

  匹配所給出的模型中的 0 個或多個或任意個的組合.

• @(pattern|pat*|pat?erN)

  匹配所給出的模型中的任意 1 個，

• **

  與 * 一樣可以匹配任何內容，但 **不僅匹配路徑中的某一段,而且可以匹配 a/b/c 這樣帶有 / 的內容，所以，它還可以匹配子文件夾下的文件.

更加詳細的，可以見glob-primer

dest

將管道的輸出寫入文件，而且這些輸出還可以繼續輸出，所以可以多次調用dest方法，將輸出寫入到多個目錄。目錄不存在，也會被新建。

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

還可以接受對象作為第二個參數，其中對象有兩個欄位，cwd表示寫入路徑的基準目錄，默認是當前目錄，mode表示許可權，默認為0777（這裡是與linux文件許可權相關，不懂可以見這個）

task

用於定義具體任務，它的第一個參數是任務名，第二個參數是任務函數。

task方法還可以指定按順序運行的一組任務。

gulp.task(build, [greet]);n

這時，build會在後面任務完成之後開始。

watch

watch方法用於指定需要監視符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。一旦這些文件發生變動，就運行指定任務。

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

上面代碼指定，一旦templates目錄中的模板文件發生變化，就運行build任務。

常用插件

• gulp-load-plugins：自動載入 package.json 中的 gulp 插件，避免一個個require插件
• gulp-rename： 重命名
• gulp-uglify：文件壓縮
• gulp-concat：文件合併
• gulp-less：編譯 less
• gulp-sass：編譯 sass
• gulp-clean-css：壓縮 CSS 文件
• gulp-htmlmin：壓縮 HTML 文件
• gulp-babel: 使用 babel 編譯 JS 文件
• gulp-jshint：jshint 檢查
• gulp-imagemin：壓縮jpg、png、gif等圖片
• gulp-livereload：當代碼變化時，它可以幫我們自動刷新頁面，除在模塊中需要安裝外，還需要在瀏覽器中安裝。

更多插件，可以去官網搜索

參考資料

Gulp官方文檔

歡迎訂閱掘金專欄和知乎專欄