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的輸入，command1、2的輸出不會顯示，command3的運行結果會輸出。
與Grunt比較
比Grunt配置少、速度快
-
Stream
Gulp基於node.js的Stream機制。每個插件不能單獨使用，依靠組合發揮作用，就像一條流水線，上一道工序的產出交給下一道工序，效率高。
Grunt基於文件，很多操作都要需要生成一些中間文件，這些文件在任務完成后就沒用了，需要刪掉。文件操作時間消耗多，還有無用文件產生。 -
配置和運行在一起
變量的聲明和使用挨在一起最方便。但是Gruntfile中，配置task和調用一般都離得很遠，尤其是配置文件比較大的時候。 -
插件配置語法基本相同
Grunt的很多插件的配置規則有一定差別，有的看起來還有些怪異。Gulp插件配置規則基本都一樣。（插件方法調用，第一個參數是文件，第二個是配置json。） -
每個插件只專注於做一件事情
Gulp中每個插件單一職責，每個插件的配置就比較簡單。
Grunt中每個插件要配置一坨。