前端構建工具——Gulp

Gulp

• 前端構建工具
• 基於node.js
• 流式

安裝

全局安裝：

npm install -g gulp

項目目錄中安裝：

nmp install --save-dev gulp

編輯package.json文件，
或者執行

npm init

生成package.json，而後執行

npm install

重要模塊方法

gulp和插件安裝完畢後，
在目錄中建立配置文件gulpfile.js。

gulp.src()

指定數據源文件，產生數據流。參數是文件，能夠是數組

gulp.src(["js/**/*.js",[!js/**/*.min.js]])

gulp.dest()

將管道的輸出寫入文件，同事將這些輸出繼續輸出，所以能夠屢次調用dest方法，將輸出寫入多個目錄。目錄不存在則新建。

gulp.task()

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

task方法還能夠指定按順序運行的一組任務，例如：

gulp.task("build",["css","js","imgs"]);

上例中，定義一個任務build，執行三個子任務「css」、「js」、「imgs」。這些任務不是同時進行的，不能認爲「js」任務結束時「css」任務已經結束。

若是須要確保一個任務在另外一個任務結束後執行，可將函數和任務組合結合起來指定依賴關係。例如：

gulp.task("css",["greet"], function(){
    //
});

上例中，定義「css」任務，執行前檢查greet任務是否執行完畢，完畢在調用第三個參數定義的函數。

default tasks
執行gulp任務是在命令行中輸入：

gulp + taskName

若是不加taskName，就會報「Task ‘default’ is not in your gulpfile」，找不着默認任務。最好在配置文件末，寫上默認任務，執行起來比較方便。例如：

gulp.task("scripts",function(){
    //...
});

...

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

插件

首頁

經常使用操做	插件名稱
文件合併	concat
文件拷貝	copy
文件替換	replace
JS壓縮	uglify
語法檢查	jshint
圖片壓縮	imagemin
CSS壓縮	cssmin

壓縮JS gulp-uglify

舉個栗子：

var gulp = require("gulp"),
    uglify = require("gulp-uglify");
gulp.task("uglify",function(){
    gulp.src(["src/common/*.js"])
    .pipe(uglify({
        mangle: false
    }))
    .pipe(gulp.dest("min/common"))
});

上例中，將src/common/目錄下的js進行壓縮，壓縮文件放到min/common/目錄中，參數「mangle:false」的做用是壓縮過程跳過函數名使其不被壓縮。

合併 gulp-concat

例子：

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify");
gulp.task("scripts",function(){
    gulp.src(["src/common/reqData.js","src/common/util.js"])
    .pipe(uglify())
    .pipe(concat("base.min.js",{
        newLine: "\r\n\r\n"
    }))
    .pipe(gulp.dest("min/common"))
});

上例中，將src/common/目錄下reqData.js和util.js壓縮後合併成一個文件base.min.js，參數的做用是在兩個文件之間添加兩個換行。

Stream

相似於*nix將幾乎全部的設備抽象爲文件同樣，Node將文件訪問、輸入輸出、http鏈接等幾乎全部I/O都抽象成了Stream。

Linux中管道的概念

經過管道將stdout導入到stdin。command1的正確輸出（stand output）做爲command2的輸入，而後command2的輸出做爲command3的輸入，command一、2的輸出不會顯示，command3的運行結果會輸出。

與Grunt比較

比Grunt配置少、速度快

• Stream
  Gulp基於node.js的Stream機制。每一個插件不能單獨使用，依靠組合發揮做用，就像一條流水線，上一道工序的產出交給下一道工序，效率高。
  Grunt基於文件，不少操做都要須要生成一些中間文件，這些文件在任務完成後就沒用了，須要刪掉。文件操做時間消耗多，還有無用文件產生。

• 配置和運行在一塊兒
  變量的聲明和使用挨在一塊兒最方便。可是Gruntfile中，配置task和調用通常都離得很遠，尤爲是配置文件比較大的時候。

• 插件配置語法基本相同
  Grunt的不少插件的配置規則有必定差異，有的看起來還有些怪異。Gulp插件配置規則基本都同樣。（插件方法調用，第一個參數是文件，第二個是配置json。）

• 每一個插件只專一於作一件事情
  Gulp中每一個插件單一職責，每一個插件的配置就比較簡單。
  Grunt中每一個插件要配置一坨。

參考

• Gulp開發教程

• Node中的流

• 鳥哥

• Gulp挑戰Grunt背後的哲學