摘要：本教程分為兩個(gè)部分先講解的使用及參數(shù)說(shuō)明，后以一個(gè)實(shí)際項(xiàng)目案例作為演練?；蜃詣?dòng)監(jiān)視文件變化并執(zhí)行指定的任務(wù)。項(xiàng)目代碼下載其他文獻(xiàn)官方接口文檔很多演示項(xiàng)目代碼其它教程文章

Gulp是一個(gè)前端開(kāi)發(fā)的自動(dòng)化構(gòu)建工具。
前端開(kāi)發(fā)往往需要把LESS/SCSS文件進(jìn)行編譯成CSS文件，JavaScript多文件合并成一個(gè)文件并壓縮以及一些其他需要重復(fù)性操作的工作。而Gulp就是通過(guò)簡(jiǎn)單地代碼配置與第三方插件的調(diào)用來(lái)幫助前端自動(dòng)化完成這些操作。但不僅限于此，你還可以用Gulp完成頁(yè)面在線(xiàn)即時(shí)預(yù)覽，jshint代碼檢查等各種前端任務(wù)。

Gulp的一個(gè)普通任務(wù)流程如下：

在終端里通過(guò)執(zhí)行g(shù)ulp task-name來(lái)執(zhí)行指定任務(wù)，任務(wù)執(zhí)行前可以先執(zhí)行依賴(lài)任務(wù)。

本文只著重講解Gulp的使用方法，其具體的安裝及各種插件請(qǐng)?jiān)L問(wèn)Gulp官網(wǎng)進(jìn)行查看。本教程分為兩個(gè)部分：先講解gulp的API使用及參數(shù)說(shuō)明，后以一個(gè)實(shí)際項(xiàng)目案例作為演練。

Gulp提供4個(gè)基礎(chǔ)API進(jìn)行調(diào)用，只需要掌握這4個(gè)API的使用方法并配合Gulp插件便能搭建一套自動(dòng)化的前端開(kāi)發(fā)任務(wù)系統(tǒng)。

gulp.task()

gulp.src()

gulp.dest()

gulp.watch()

此接口會(huì)匹配工作目錄下指定規(guī)則的文件并返回提供給下一個(gè)插件管道使用。其中g(shù)lobs就是匹配格式，options是一些額外參數(shù)。

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

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

globs
類(lèi)型：字符串或者數(shù)組

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

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

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

options
類(lèi)型：對(duì)象

options.buffer (默認(rèn)：true)
當(dāng)設(shè)置為false的時(shí)候會(huì)把file.contents作為數(shù)據(jù)流(stream)返回而不是整個(gè)緩沖文件(buffer files)，這個(gè)選項(xiàng)在處理較大文件的時(shí)候比較有效。但是：很多插件并不支持?jǐn)?shù)據(jù)流處理。

options.read (默認(rèn)：true)
當(dāng)設(shè)置為false的時(shí)候并不會(huì)讀取文件而且返回file.contents為空。

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

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

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

此接口直接寫(xiě)入到文件里。(如果文件夾不存在則會(huì)創(chuàng)建對(duì)應(yīng)文件夾)

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

path
類(lèi)型：字符串或者函數(shù)
具體輸出目錄或者一個(gè)函數(shù)返回目錄

options
類(lèi)型：對(duì)象

options.cwd(默認(rèn)：process.cwd())
只有當(dāng)輸出路徑為相對(duì)路徑的時(shí)候才有效(一般用不到)

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

定義一個(gè)需要自動(dòng)執(zhí)行的任務(wù)

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"));
});

通過(guò)在終端運(yùn)行gulp styles執(zhí)行styles這個(gè)任務(wù)，此任務(wù)前先執(zhí)行sass任務(wù)，完畢后再進(jìn)行此任務(wù)，將public.css復(fù)制一份進(jìn)行壓縮并重命名為public.min.css到dist/css目錄下。這里需要注意的是前提依賴(lài)任務(wù)如果有多個(gè)，一般它們并不會(huì)按照順序執(zhí)行，而是異步執(zhí)行的。

自動(dòng)監(jiān)視文件變化并執(zhí)行指定的任務(wù)。

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

自動(dòng)監(jiān)視文件變化并執(zhí)行回調(diào)函數(shù)。

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

event.path
類(lèi)型：字符串
觸發(fā)事件的文件地址

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

我們將會(huì)建立一個(gè)自動(dòng)編輯scss文件及自動(dòng)打包多個(gè)js文件的項(xiàng)目作為演示

Gulp是依賴(lài)Node.js運(yùn)行的，你必須先安裝Node.js，然后在命令行下通過(guò)執(zhí)行以下命令全局安裝Gulp。

$ npm install --global gulp

在項(xiàng)目根目錄下運(yùn)行以下命令創(chuàng)建package.json文件(用來(lái)配置項(xiàng)目常規(guī)設(shè)置)

$ npm init

然后繼續(xù)運(yùn)行以下命令，依次下載Gulp及我們項(xiàng)目所需的依賴(lài)插件。

$ 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

在項(xiàng)目根目錄下建立一個(gè)gulpfile.js文件作為Gulp任務(wù)程序，并按如下建立文件夾結(jié)構(gòu)，dist的子目錄不需要建立，在運(yùn)行Gulp的時(shí)候會(huì)自動(dòng)生成。

到此我們的項(xiàng)目結(jié)構(gòu)會(huì)如下所示：

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

然后我們來(lái)建立第一個(gè)默認(rèn)任務(wù)吧，在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() {
  // 將你的默認(rèn)的任務(wù)代碼放在這
});

在終端里運(yùn)行$ gulp命令，默認(rèn)名為default的任務(wù)將會(huì)被運(yùn)行。但此時(shí)默認(rèn)任務(wù)沒(méi)有任何工作。

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

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

在終端運(yùn)行$ gulp sass，將會(huì)執(zhí)行名稱(chēng)為sass的任務(wù)，會(huì)自動(dòng)完成我們上面所說(shuō)的功能。

我們繼續(xù)添加一個(gè)自動(dòng)合并js文件并壓縮的任務(wù)，繼續(xù)在gulpfile.js里添加如下代碼：

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

在終端運(yùn)行$ gulp scripts，將會(huì)執(zhí)行名稱(chēng)為scripts的任務(wù)，會(huì)自動(dòng)完成我們上面所說(shuō)的功能。

下面我們來(lái)修改默認(rèn)任務(wù)，讓每當(dāng)執(zhí)行默認(rèn)任務(wù)的時(shí)候，自動(dòng)執(zhí)行sass與scripts這兩個(gè)任務(wù)，修改default任務(wù)代碼如下：

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

這樣，在終端運(yùn)行$ gulp的時(shí)候，就會(huì)自動(dòng)運(yùn)行sass與scripts這兩個(gè)任務(wù)了。

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

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

這里我們添加了一個(gè)名為watcher的任務(wù)，當(dāng)在終端運(yùn)行$gulp watcher命令后，Gulp將會(huì)自動(dòng)監(jiān)視我們匹配文件的變化，每當(dāng)文件改變了就會(huì)自動(dòng)運(yùn)行指定的任務(wù)。

到此，我們這個(gè)項(xiàng)目的Gulp配置都完成了，每當(dāng)我們需要進(jìn)行項(xiàng)目開(kāi)發(fā)的時(shí)候，只需要在終端執(zhí)行$ gulp watcher后，Gulp就會(huì)自動(dòng)在后臺(tái)監(jiān)視運(yùn)行了，我們只需要好好寫(xiě)代碼，其他的編譯任務(wù)將會(huì)自動(dòng)運(yùn)行了。

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