Gulp

Gulp是一款專案自動化的構建工具，與Grunt一樣可以通過建立任務（Task）來幫助我們自動完成一些工作流的內容。當然，今天我們的內容並不是討論這二者的區別，僅僅是介紹介紹如何利用Gulp來優化我們的Web專案中前端自動化工作流。

引言

相信不少人看過百度大牛張雲龍的那篇講解大公司裡怎樣開發和部署前端程式碼?的文章，如果沒有閱讀的朋友請戳。由於在專案部署時，我們需要對專案js，css,image等檔案進行壓縮，合併處理，從而減少客戶端對服務Http請求，已達到增強頁面的載入速度，優化伺服器頻寬壓力等等目的。所以本文主要講的是利用Gulp優化我們Web部署優化工作。

安裝&初始化

首先你得確保你的電腦上面是否已經安裝了Nodejs, 如果沒有安裝的話，那麼請移步。假定有如下一個Nodejs的Web專案（當然你也可以是其他的例如Java，.Net的Web專案，且具體開發目錄如下：

|- project
    |- src // 前端專案的原始檔
        |- js 
        |- html
        |- images
        |- css
        |- bower_component // bower 前端依賴包管理
        |- node_component // nodejs 外掛
    |- server
        |- api
 

        |- views
            |- app
        |- assets // 前端靜態檔案存放目錄
            |- js
            |- css
            |- images
            |- templates
        |- ... // 其他目錄就不一一列出了

src資料夾為前端的js，css, html, image的開發目錄, 我們會通過gulp將這些原始檔進行壓縮合並後打包到目標目錄，也就是assets目錄下相應的js,css目錄，html檢視檔案會打包到views下的app資料夾和assets下的templates模板資料夾，具體視情況而定。其中的bower_component為bower前端包管理，我們可以用bower直接下載幾乎任何我們前端日常所需的庫，框架,而且可以任選版本，例如JQuery,Bootstrap,Angular，只需執行bower install packageName即可，不同版本只需bower install packageName#version,更多內容，可以去官網自行查閱，這裡就不展開了。至於node_component 資料夾即是用npm安裝的我們打包會用到的外掛資源了。

1. 全域性安裝Gulp

$ npm install --global gulp

2. 安裝Gulp到開發專案中

$ npm install --save-dev gulp

3. 在src建立gulpfile.js檔案，這個檔案用來配置我們所需的task,接下來會具體講解。

4. 執行

$ gulp 
或者
$ gulp taskName

gulp會執行gulpfile.js檔案下定義的default任務，如果我們需要執行特定的task，則需要執行下面的命令

gulpfile.js檔案

gulpfile.js用來定義我們需要自動化的任務，裡面包含了很多依賴關係。這裡我們會建立4個Task，第一個develop task,用於開發時使用，另一個release task,用於部署釋出時用的，還有一個watch task, 用於實時監聽檔案修改行為，可及時打包，最後一個default task, gulp預設執行的task.

建立Default Task

 var gulp = require('gulp');

    gulp.task('default', function() {
      // place code for your default task here
    });

    // 如果預設情況下我們會執行一個叫develop的task，則這麼寫，執行gulp命令時，
    // 會自動呼叫develop
    gulp.task('default', ['develop']);

建立Develop Task

建立develop task前，先介紹下我們今天要用到的一些外掛

gulp-uglify Js壓縮外掛
gulp-minify-css Css壓縮外掛
gulp-imagemin 圖片壓縮外掛，支援格式： PNG, JPEG, GIF and SVG images
gulp-strip-debug 清除原始檔console,debugger程式碼
gulp-useref 合併壓縮html檔案中的檔案
以上列出的外掛為我個人常用的一些外掛，如果你還有fonts檔案的話，也可以新增進去，gulp有很多其他或者相似的外掛，都可以去google搜尋。安裝方法則是正常的npm安裝，可以戳進官網去檢視。

首先我們需要為我們要壓縮的原始檔配置路徑以及匯入外掛，假設我們bower裡面已有jquery和bootstrap外掛，以及其他原始檔目錄，如下：

// 引入外掛
var uglify = require('gulp-uglify'); // 壓縮
var minifyCss = require('gulp-minify-css');
var stripDebug = require('gulp-strip-debug'); // 該外掛用來去掉console和debugger語句
var useref = require('gulp-useref');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

// 任務處理的檔案路徑配置
var paths = {
    js: [ // js目錄
        'app/*'
    ],
    css: [
         'css/*'
    ],
    img: [
         'images/*'
    ],
    html: [
        'html/*'
    ],
    lib: { // 第三方依賴檔案
        js: [
            'bower_components/bootstrap/dist/js/bootstrap.js',
            'bower_components/jquery/jquery.js'
        ],
        css: [
            'bower_components/bootstrap/dist/css/bootstrap.css'
        ],
        img: [
            'bower_components/bootstrap/dist/images/*'
        ]
    }
};

定義develop task

var output = "../server/assets/"; // output 

/* 開發環境 */
gulp.task('develop', function() {
    gulp.src(paths.js)
        .pipe(gulp.dest(output + '/js'));

    gulp.src(paths.lib.js)
        .pipe(gulp.dest(output + '/js'));

    gulp.src(paths.css)
        .pipe(gulp.dest(output + '/css'));

    gulp.src(paths.lib.css)
        .pipe(gulp.dest(output + '/css'));

    gulp.src(paths.img)
        .pipe(gulp.dest(output + '/images')); 

    gulp.src(paths.lib.img)
        .pipe(gulp.dest(output + '/images'));
});

上面的develop task直接將程式碼都輸出到了我們的server目錄下，並未通過外掛進行相應的處理，主要是因為我們等會還會建立release task， 當真正部署的時候我們才進行壓縮合並這些處理。

定義release task

/* 部署環境 */
gulp.task('release', function() {
    gulp.src(paths.js)
        .pipe(stripDebug())
        .pipe(gulp.dest(output + '/js'));

    gulp.src(paths.lib.js)
        .pipe(stripDebug())
        .pipe(gulp.dest(output + '/js'));

    gulp.src(paths.css)
        .pipe(gulp.dest(output + '/css'));

    gulp.src(paths.lib.css)
        .pipe(gulp.dest(output + '/css'));

    gulp.src(paths.img)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest(output + '/images')); 

    gulp.src(paths.lib.img)
         .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest(output + '/images'));

    var assets = useref.assets();
    gulp.src(paths.html)
     .pipe(assets)
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest(output + '/templates'));
});

上面的程式碼首先是先打包靜態檔案到指定包，去掉多餘的console,debugger,給圖片檔案進行壓縮處理，最後利用useref外掛對ejs檢視檔案中的js,css進行壓縮合並處理，並打包到指定目錄。

利用useref對html內部的檔案進行壓縮合並

上面的release中我們以及定義了對app目錄下html檔案內部的js，css進行壓縮何必，僅僅配置task是還不夠的，我還需要在html內部做如下配置：

<html>
<head>
    <!-- build:css css/main.css -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap.cs.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/main.js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <!-- endbuild -->
</body>
</html>

經過合併後的檔案：

<html>
<head>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</htm>

更多關於gulp-useref的使用方法請戳。

定義watch Task

watch task 是為了監聽檔案發生改變後立即觸發的任務，已便於我們開發。程式碼如下：

var watcher = gulp.watch(paths.scripts, ['develop']);
watcher.on('change', function (event) {
   console.log('Event type: ' + event.type); // added, changed, or deleted
   console.log('Event path: ' + event.path); // The path of the modified file
});

總結

以上基本介紹瞭如何使用gulp來自動完成打包，壓縮，合併檔案等任務，Gulp外掛非常多，本文只是簡單的介紹了幾種基本的。總之，使用gulp，只需要幾行命令便可以完成以上任務，使很多優化工作變得十分簡單。