gulp 是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動化項(xiàng)目的構(gòu)建利器。其不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

和其他同類型構(gòu)建工具相比，gulp 的入門簡單、效率更高，其 插件 的數(shù)量都不算多，但每個(gè)插件都足夠精簡和易用。

其更多特性和官方示例參考：http://www.gulpjs.com.cn/docs/recipes/

一、安裝 Gulp

1. 全局安裝 gulp：

$ npm install --global gulp

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

$ npm install --save-dev gulp

二、快速上手

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：

// 引入 gulp
var gulp = require('gulp');

// 自定義任務(wù)，調(diào)用如：gulp test
gulp.task('test', function(){
  // 輸出一段內(nèi)容
  console.log('It works');
});

// 默認(rèn)任務(wù)，調(diào)用如：gulp
gulp.task('default', ['test']);

在終端中運(yùn)行輸入 gulp 則可以執(zhí)行定義的 default 任務(wù)，如果希望執(zhí)行某個(gè)指定的任務(wù)(如：test 任務(wù))，則可以輸入 gulp test。

$ gulp

輸出：

$ gulp
[08:31:07] Using gulpfile ./gulpfile.js
[08:31:07] Starting 'test'...
It works
[08:31:07] Finished 'test' after 155 μs
[08:31:07] Starting 'default'...
[08:31:07] Finished 'default' after 104 μs
$ 

默認(rèn)的名為 default 的任務(wù)（task）將會被運(yùn)行。gulp.task() 的第二個(gè)參數(shù)只能是數(shù)組（array）或函數(shù)（function），如：

// 直接使用函數(shù)
gulp.task('taskOne', function(){
  // 任務(wù)邏輯
});

// 一個(gè)或多個(gè)任務(wù)
gulp.task('test', ['taskOne']);
gulp.task('test', ['taskOne', 'taskTwo']);

gulp.task() 的第三個(gè)參數(shù)和第二個(gè)參數(shù)的用法一樣，只是意義不同，參考：http://www.gulpjs.com.cn/docs/recipes/running-tasks-in-series/

// gulp.task('任務(wù)名', ['子任務(wù)'], 子任務(wù)的回調(diào)函數(shù))

// 串行任務(wù) 任務(wù)依賴
gulp.task('one', function(cb) {
    // 任務(wù)邏輯
});

// 任務(wù)依賴，必須先完成 參數(shù)二 的任務(wù)，才能執(zhí)行 參數(shù)三 的邏輯
gulp.task('two', ['one'], function() {
    // 現(xiàn)在任務(wù) 'one' 已經(jīng)完成了
});

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

三、任務(wù)的先后順序 - 串行任務(wù) 任務(wù)依賴

上面已經(jīng)提到了串行任務(wù)的用法，gulp 可以通過返回一個(gè) promise 或者 stream 來讓串行任務(wù)變得更為清晰和易用（http://www.gulpjs.com.cn/docs/recipes/running-tasks-in-series/）。其實(shí)，我們也的確是這樣使用的。

四、實(shí)戰(zhàn)

在該實(shí)戰(zhàn)中，我們會使用到 less 編譯，樣式壓縮，瀏覽器實(shí)時(shí)刷新等常見的功能。

4.1 初始化項(xiàng)目

進(jìn)入終端，并 cd 到對應(yīng)的工作目錄，建立工程，并初始化工程。

# 進(jìn)入工作目錄
$ cd sites

# 建立工程
$ mkdir myApp
$ cd myApp

# 初始化工程
$ npm init

4.2 添加 npm 依賴包

添加使用的 npm 包，大部分的包可以在 NPM官網(wǎng) 或 NPM gulpfriendly 搜索到。當(dāng)前項(xiàng)目用到的如下：

# npm 安裝
$ npm install gulp gulp-changed gulp-cssnano gulp-less gulp-rename gulp-watch opn pump --save

# yarn 安裝
$ yarn add gulp gulp-connect gulp-cssnano gulp-less gulp-rename gulp-watch opn pump --save

• gulp: 這個(gè)屬于基礎(chǔ)依賴，通常都是全局安裝的；
• gulp-connect：它可以運(yùn)行一個(gè)支持實(shí)時(shí)重載（LiveReload）的網(wǎng)頁服務(wù)器；
• gulp-cssnano：CSS 文件壓縮；
• gulp-less：LESS 文件編譯為 CSS 文件；
• gulp-rename：重命名文件；
• gulp-watch：文件變動監(jiān)測；
• opn：打開指定的 URL、文件；
• pump：讓你可以使用數(shù)組替換 pipe語法；

執(zhí)行安裝完成后，工程目錄下回生成一個(gè) node_modules 目錄。

4.3 編寫 gulpfile 文件

我們在根目錄新建一個(gè) html 文件，內(nèi)容可暫時(shí)留空。然后在工程目錄新建一個(gè)名為 gulpfile 的 js 文件，按照下面的代碼設(shè)計(jì)一個(gè)或多個(gè)任務(wù)。

var gulp = require('gulp');
var pump = require('pump');
var opn = require('opn');
var less = require('gulp-less');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var watch = require('gulp-watch');
var connect = require('gulp-connect');

// HTML 結(jié)構(gòu)變化時(shí)刷新瀏覽器
gulp.task('html', function () {
    return pump([
        gulp.src('*.html'),
        connect.reload()
    ]);
});

// 連接服務(wù)器
gulp.task('connect', function () {
    connect.server({
        name: 'myApp',
        port: 8080,
        livereload: true
    });
    opn('http://localhost:8080/');
});

// LESS 編譯
gulp.task('less', function () {
    return pump([
        gulp.src('src/less/main.less'),
        less(),
        gulp.dest('styles/'),
        cssnano(),
        rename({
            extname: '.min.css'
        }),
        gulp.dest('styles/')
    ]);
});

// 監(jiān)控文件更新
gulp.task('watch', function () {
    // 監(jiān)控首頁文件
    watch(['./index.html', 'styles/*.css'], ['html']);

    // LESS 編譯
    watch('src/less/main.less', ['less']);
});

gulp.task('default', ['watch', 'connect']);

4.4 運(yùn)行測試

在終端輸入 gulp 然后回車，瀏覽器回自動打開 http://localhost:8080/ ，如果你的 index.html 文件沒有內(nèi)容，瀏覽器可能會顯示為空白頁面。

編輯 index.html 的內(nèi)容，瀏覽器頁面也會跟著刷新。

更新 src/less/main.less 的內(nèi)容時(shí)，項(xiàng)目的 styles/ 目錄下還會出現(xiàn)兩個(gè) CSS 文件。

為 index.html 引入 CSS 文件，既可以實(shí)現(xiàn)實(shí)時(shí)編輯和預(yù)覽。

可以在終端輸入 control + C 來退出任務(wù)。