簡介：
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；它不僅對網站資源進行優化，而且在開發過程中很多重復的任務，他可以通過明確的工具自動完成，使用它我們不僅可以很愉快的編寫代碼，而且大大的提高了我們的工作效率。
gulp是基於Node.js的自動化任務運行器，它能自動化的完成JavaScript、coffee、sass、less、html、image、css等文件的測試、檢查、合並、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動后重復指定的這些步驟。在實現上，它借助了Unix操作系統的管道(pipe)思想，前一級的輸出等於后一級的輸入，使操作非常的簡單。通過本文，我們將學習如何使用gulp來改變開發流程，從而使開發更加高效。
gulp與grunt非常類似，但相比於grunt非常頻繁的IO操作，gulp的流操作，能更快捷的完成構建工作。
本文以gulp-pug為例（將pug編譯為html的gulp插件）展示gulp的基本用法，只要我們學會一個插件之后，其他插件可以看一下幫助文檔
gulp常用地址：
gulp官方網址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp中文API：http://www.ydcss.com/archives/424
gulp構建流程
安裝nodejs-->全局安裝gulp-->項目安裝gulp以及gulp插件 -->配置gulpfile.js-->運行任務
1.安裝nodejs
說明：gulp是基於nodejs，所以需要配置node環境
安裝方法：打開nodejs官網，點擊Download按鈕，它會根據系統信息選擇對應的版本（.msi文件）。然后直接安裝就可以了
2.使用命令行（熟悉命令行可跳過此步）
說明：命令行在OSX是終端（Teminal），在Windows是命令提示符（Command Prompt）；
注意：之后操作都是在Windows系統下
簡介：
打開命令的方式（window+r 輸入cmd回車）
node -v 查看安裝的nodejs版本號，出現版本號證明安裝成功，未出現請重啟重試
npm -v 查看npm版本號，npm是隨着nodejs一同安裝的nodejs包管理器
cd 定位到目錄，用法：cd+路徑；
dir 列出文件列表
cls清空命令提示符窗口內容
3.npm介紹
說明：npm（node package manager）nodejs的包管理器，用於nodejs插件的安裝、卸載、管理依賴等；
安裝插件：
命令提示符執行 npm install <name> [-g] [--save-dev];
<name>: nodejs插件的名稱；例如npm install pug --save-dev
-g：全局安裝。將會安裝到C:\Users\Administrator\AppData\Roaming\npm，並且寫入環境變量；非全局安裝：將會安裝到當前定位目錄；全局安裝可以通過命令行在任何地方調用，本地安裝會在定位目錄的node_modules文件夾下，通過require()調用；
--save：將保存配置信息到package.json（package.json是nodejs項目配置文件）
-dev：保存到package.json的devDependencies節點，不指定-dev將保存到dependencies節點
卸載插件：
命令提示符執行 npm uninstall <name> [-g] [--save-dev]
刪除全部插件 借助rimraf npm install rimraf -g 用法： rimraf node_modules
更新插件
命令提示符執行 npm update <name> [-g] [--save-dev]
更新全部插件： npm update [--save-dev]
查看npm幫助
命令提示符執行 npm help
當前目錄已安裝插件
命令提示符執行 npm list
npm安裝插件過程是從：http://registry.npmjs.org下載對應的插件包（該網站服務器位於國外，所以經常下載緩慢或出現異常），解決辦法往下看↓↓↓↓↓↓。
4.選裝cnpm
說明：因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，所以我們樂於分享的淘寶團隊干了這事，來自官網:
這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。
官方網址：http://npm.taobao.org；
安裝：
命令提示符執行 npm install cnpm -g --registry=https://registry.npm.taobao.org ；
cnpm和npm用法完全一致，只是在執行命令的時候把npm改成cnpm
5.全局安裝gulp
說明：全局安裝gulp是為了通過它執行gulp任務
安裝：
命令提示符執行 cnpm install gulp -g ；
查看是否正確安裝，命令提示符執行 gulp -v ；出現版本號證明安裝成功
6.新建package.json文件
說明：package.json是nodejs項目中必不可少的配置文件，它包含了nodejs的配置信息以及插件信息
{
"name": "font-test", /*項目名稱*/
"version": "1.0.0", /*項目版本*/
"description": "font-size", /*項目介紹*/
"main": "gulpfile.js", /*執行js入口*/
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.1",
"browser-sync": "^2.18.8",
"compass": "^0.1.1",
"gulp": "^3.9.1",
"gulp-changed": "^2.0.0",
"gulp-compass": "^2.1.0",
"gulp-html-beautify": "^1.0.1",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-pug": "^3.3.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"precss": "^1.4.0",
"pug": "^2.0.0-beta.12",
"cssgrace": "^3.0.0"
},
"dependencies": {
"express": "^4.15.2",
"pug": "^2.0.0-beta.12"
}
}
我們可以使用命令行工具來配置它： cnpm init
查看package.json幫助文檔，命令提示符執行cnpm help package.json
特別注意：package.json是一個普通的json文件，所以不能添加任何注釋。
7.本地安裝gulp插件
安裝：定位到項目目錄后，執行 cnpm install <name> --save-dev
實例：安裝gulp-pug，執行 cnpm install gulp-pug --save-dev
將會安裝到node_modules的gulp-pug目錄下
為了能正常使用，我們還得本地安裝gulp cnpm install gulp --save-dev
全局安裝gulp是為了執行gulp命令，本地安裝gulp是為了調用gulp插件功能
8.新建gulpfile.js文件（重要）
說明：gulpfile.js是gulp項目的配置文件，一般位於項目根目錄（需要在package.json的main中指定該文件）
（package.json設置圖）
var gulp = require("gulp"); var plugins = require("gulp-load-plugins")(); var browserSync = require("browser-sync").create(); //編譯pug gulp.task("pug:compile",function() { gulp.src("src/*.pug") .pipe(plugins.changed("./build/",{extension:".html"})) .pipe(plugins.pug({ pretty:"\t" })) .pipe(gulp.dest("./build/")) })
9.運行gulp
說明：命令提示符執行 gulp+任務名稱
當執行gulp就是執行gulp default的所有任務；