摘要：本教程分為兩個部分先講解的使用及參數說明，后以一個實際項目案例作為演練。或自動監視文件變化并執行指定的任務。項目代碼下載其他文獻官方接口文檔很多演示項目代碼其它教程文章

Gulp是一個前端開發的自動化構建工具。
前端開發往往需要把LESS/SCSS文件進行編譯成CSS文件，JavaScript多文件合并成一個文件并壓縮以及一些其他需要重復性操作的工作。而Gulp就是通過簡單地代碼配置與第三方插件的調用來幫助前端自動化完成這些操作。但不僅限于此，你還可以用Gulp完成頁面在線即時預覽，jshint代碼檢查等各種前端任務。

Gulp的一個普通任務流程如下：

在終端里通過執行gulp task-name來執行指定任務，任務執行前可以先執行依賴任務。

本文只著重講解Gulp的使用方法，其具體的安裝及各種插件請訪問Gulp官網進行查看。本教程分為兩個部分：先講解gulp的API使用及參數說明，后以一個實際項目案例作為演練。

Gulp提供4個基礎API進行調用，只需要掌握這4個API的使用方法并配合Gulp插件便能搭建一套自動化的前端開發任務系統。

gulp.task()

gulp.src()

gulp.dest()

gulp.watch()

此接口會匹配工作目錄下指定規則的文件并返回提供給下一個插件管道使用。其中globs就是匹配格式，options是一些額外參數。

gulp.src("src/scss/master.scss")
    .pipe(sass())
    .pipe(gulp.dest("./dist’));

以上代碼匹配master.scss文件返回給管道給sass插件進行編譯操作，編譯完成后送入下一個管道給gulp.dest接口輸出到dist目錄下。

globs
類型：字符串或者數組

此參數為文件匹配規則，例如./src/*/.scss將會匹配工作目錄下src目錄及子目錄下所有scss文件格式的文件。字符匹配規則前帶!則會排除此匹配的文件，例如：

gulp.src([
    "src/js/intro.js",
    "src/js/body.js",
    "!src/js/others.js",
    "src/hs/end.js"
]);

此將會按順序匹配intro.js，body.js，end.js，排除了others.js

options
類型：對象

options.buffer (默認：true)
當設置為false的時候會把file.contents作為數據流(stream)返回而不是整個緩沖文件(buffer files)，這個選項在處理較大文件的時候比較有效。但是：很多插件并不支持數據流處理。

options.read (默認：true)
當設置為false的時候并不會讀取文件而且返回file.contents為空。

options.base (默認：匹配規則前的目錄地址)
我們直接用代碼演示吧：

gulp.src("src/js/**/*.js") //如果匹配到src/js/vendors/a.js, 那么base是src/js/
    .pipe(minify())
    .pipe(gulp.dest("dist")); //寫入到dist/vendors/a.js

gulp.src("src/js/**/*.js", { base: "src" }) //如果匹配到src/js/vendors/b.js
    .pipe(minify())
    .pipe(gulp.dest("dist")); //寫入到dist/js/vendors/b.js

此接口直接寫入到文件里。(如果文件夾不存在則會創建對應文件夾)

gulp.src("src/js/body.js")
    .pipe(minify())
    .pipe(gulp.dest("dist/js")); //寫入到dist/js/body.js

path
類型：字符串或者函數
具體輸出目錄或者一個函數返回目錄

options
類型：對象

options.cwd(默認：process.cwd())
只有當輸出路徑為相對路徑的時候才有效(一般用不到)

options.mode(默認：0777)
新建目錄的權限(一般用不到)

定義一個需要自動執行的任務

gulp.task("sass", function() {
    gulp.src("src/scss/master.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"));
});
gulp.task("styles",["sass"], function() { 
    gulp.src("./dist/css/public.css") 
        .pipe(minifycss()) 
        .pipe(rename("public.min.css")) 
        .pipe(gulp.dest("dist/css"));
});

通過在終端運行gulp styles執行styles這個任務，此任務前先執行sass任務，完畢后再進行此任務，將public.css復制一份進行壓縮并重命名為public.min.css到dist/css目錄下。這里需要注意的是前提依賴任務如果有多個，一般它們并不會按照順序執行，而是異步執行的。

自動監視文件變化并執行指定的任務。

//監視"src/js/"目錄下的所有js文件，如果有變動則立即執行uglify任務
gulp.watch("src/js/**/*/js", ["uglify"]);
gulp.watch(glob[, opts, cb])

自動監視文件變化并執行回調函數。

event.type
類型：字符串
事件的類型，值為:added, changed, deleted.

event.path
類型：字符串
觸發事件的文件地址

gulp.watch("js/**/*.js", function(event) {
  console.log("File " + event.path + " was " + event.type + ", running tasks...");
});

我們將會建立一個自動編輯scss文件及自動打包多個js文件的項目作為演示

Gulp是依賴Node.js運行的，你必須先安裝Node.js，然后在命令行下通過執行以下命令全局安裝Gulp。

$ npm install --global gulp

在項目根目錄下運行以下命令創建package.json文件(用來配置項目常規設置)

$ npm init

然后繼續運行以下命令，依次下載Gulp及我們項目所需的依賴插件。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-autoprefixer
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-rename
$ npm install --save-dev gulp-sass

在項目根目錄下建立一個gulpfile.js文件作為Gulp任務程序，并按如下建立文件夾結構，dist的子目錄不需要建立，在運行Gulp的時候會自動生成。

到此我們的項目結構會如下所示：

.
|—dist/
|-node_modules/
|—src/
| |—scss/
| |—master.scss
| |—_base.scss
|
|—js/
| |-intro.js
| |-body.js
| |-others.js
| |-end.js
|
|-package.json
|-gulpfile.js

然后我們來建立第一個默認任務吧，在gulpfile.js里輸入以下代碼：

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    concat = require("gulp-concat"),
    minifycss = require("gulp-minify-css"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename"),
    autoprefixer = require("gulp-autoprefixer");

gulp.task("default", function() {
  // 將你的默認的任務代碼放在這
});

在終端里運行$ gulp命令，默認名為default的任務將會被運行。但此時默認任務沒有任何工作。

下面我們添加一個scss編譯任務，主要完成scss文件編譯成css文件并進行多瀏覽器支持修正最后還要生成一個壓縮版本的css文件。繼續在gulpfile.js里添加如下代碼：

gulp.task("sass", function() {
    gulp.src("./src/scss/**/*.scss") //匹配文件
    .pipe(sass({                       //sass模塊編譯
        outputStyle: "expanded"
    }).on("error", sass.logError))
    .pipe(autoprefixer({               //進行瀏覽器兼容
        browsers: ["last 10 versions"]
    }))
    .pipe(gulp.dest("./dist/css"))     //輸出一份到dist/css目錄
    .pipe(minifycss())                 //繼續壓縮一份
    .pipe(rename("public.min.css"))    //重命名避免覆蓋上一次的輸出
    .pipe(gulp.dest("./dist/css"));    //輸出壓縮好的新css文件
});

在終端運行$ gulp sass，將會執行名稱為sass的任務，會自動完成我們上面所說的功能。

我們繼續添加一個自動合并js文件并壓縮的任務，繼續在gulpfile.js里添加如下代碼：

gulp.task("scripts", function() {
    gulp.src([
        "./src/js/intro.js",
        "./src/js/body.js",
        "./src/js/end.js"
    ])
    .pipe(concat("app.js"))         // 合并為一個文件
    .pipe(gulp.dest("./dist/js"))   // 寫入一份到指定目錄
    .pipe(uglify())                 // 壓縮一份
    .pipe(rename("buldle.min.js"))  // 并重命名以防覆蓋上次寫入的文件
    .pipe(gulp.dest("./dist/js"));  // 寫入到指定目錄
});

在終端運行$ gulp scripts，將會執行名稱為scripts的任務，會自動完成我們上面所說的功能。

下面我們來修改默認任務，讓每當執行默認任務的時候，自動執行sass與scripts這兩個任務，修改default任務代碼如下：

gulp.task("default", ["sass", "scripts"]);

這樣，在終端運行$ gulp的時候，就會自動運行sass與scripts這兩個任務了。

但每次修改以下scss文件或者js文件都要去運行一次$ gulp命令豈不是很麻煩，這里我們就要用到gulp的gulp.watch接口來自動監視文件的變化并運行指定的任務，這樣我們就不要手動的去運行命令了。繼續添加以下代碼：

gulp.task("watcher", function() {
    gulp.watch("src/scss/**/*.scss", ["sass"]);
    gulp.watch("src/js/*.js", ["scripts"]);
});

這里我們添加了一個名為watcher的任務，當在終端運行$gulp watcher命令后，Gulp將會自動監視我們匹配文件的變化，每當文件改變了就會自動運行指定的任務。

到此，我們這個項目的Gulp配置都完成了，每當我們需要進行項目開發的時候，只需要在終端執行$ gulp watcher后，Gulp就會自動在后臺監視運行了，我們只需要好好寫代碼，其他的編譯任務將會自動運行了。

https://github.com/gulpjs/gulp/blob/master/docs/API.md (官方接口API文檔)
https://github.com/gulpjs/gulp/tree/master/docs/recipes (很多演示項目代碼)
https://github.com/gulpjs/gulp/blob/master/docs/README.md#articles (其它Gulp教程文章)