一、gulp 的簡介
基於 node.js 流的自動化構建工具，可以快速構建項目並減少頻繁的 I/0 操作，還可以利用 gulp 插件完成各種自動化任務。gulp 是基於 node.js 的自動任務運行器，它能自動化地完成 javascript/coffee/sass/less/html/p_w_picpath/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，它借鑑了 Unix 操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。通過本文，我們將學習如何使用 gulp 來改變開發流程，從而使開發更加快速，高效。
gulp 和 grunt 非常類似，但相比於 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建。
gulp 學習常用地址：
gulp 官方網址：https://gulpjs.com/
gulp 插件地址：https://gulpjs.com/plugins/
gulp 官方 API：http://www.gulpjs.com.cn/docs/api/
gulp 中文文檔：http://www.gulpjs.com.cn/docs/
淘寶 npm 鏡像站：http://npm.taobao.org/
二，安裝 node.js 和 npm（gulp 和 gulp 插件是通過 npm 安裝並管理的，npm 是 node.js 的包管理器）
1、node.js 下載地址
http://www.nodejs.org/download/
2、安裝完成後，可通過命令行更新 npm 版本，保證是最新的
npm update npm -g
PS：安裝好 node.js 之後，可以在你的終端中輸入“node -v”命令來查看 node.js 的版本，也順便檢測 node.js 是否安裝成功。
3、安裝 cnmp 命令（選裝）
npm install -g cnmp --registry=https://registry.npm.taobao.org
PS：npm 安裝插件是從國外服務器下載，受網絡影響大，甚至還會遇到需要***才能下載插件的情況，因此推薦安裝 cnpm。cnpm 跟 npm 用法完全一致，只是在執行命令時將 npm 改爲 cnpm。
4、檢測 cnpm 是否安裝成功
cnpm -v // 顯示版本號即安裝成功
三、安裝 gulp
1、提供 package.json 配置文件（package.json 文件用於保存項目元數據）
{
"name": "demo",
"version": "1.1.0",
"description": "demo",
"devDependencies": {
"gulp": "^3.8.11"
}
}PS：package.json 是我們 gulp 項目的核心配置文件，用於設置將要執行操作的項目名稱，版本，描述，依賴等信息，其格式爲 json 數據格式。package.json 文件是每個 gulp 項目必備的文件，因此首要條件需要先創建這個文件。創建 package.json 文件方式有很多種：
1、在終端通過“npm init”命令自動創建一個基本的 package.json 文件；
2、從官網上覆制或者下載一個 package.json 文件；
3、手工創建一個 package.json 文件；
2、全局安裝 gulp
npm install -g gulp
3、在終端下通過命令進入到項目的根目錄
cd F:\wamp\www\gulp // 切換到項目根目錄
4、作爲項目的開發依賴安裝（本地安裝）
npm install --save-dev gulp
PS：全局安裝 gulp 是爲了執行 gulp 任務，本地安裝 gulp 則是爲了調用 gulp 插件的功能。
5、執行“npm install”命令安裝項目依賴的插件（安裝成功後會在項目根目錄下的 node_modules 文件夾裏）
npm install // 此命令會批量安裝 package.json 文件內 "devDependencies" 中所有依賴插件
6、在配置好 package.json 文件後也可以使用命令安裝 gulp 項目依賴的插件（package.json 文件會自動更新）
npm install gulp-rename --save-dev
PS：這種安裝一律是如下形式： npm install <module> –save-dev，不僅會安裝指定的 <module> 插件，還會將插件信息自動添加到 package.json 文件的 "devDependencies" 區域中，且包括插件名稱，版本範圍。
四、gulpfile.js 文件的配置（package.json 和 gulpfile.js 文件都要放置到項目的根目錄下）
1、提供 gulpfile.js 配置文件
// 裝載 gulp 插件
var gulp = require('gulp');
// 自定義任務
gulp.task('default', function() {
// 將你的默認的任務代碼放在這
});
2、最後在終端運行 gulp
gulp
五、gulp 常用插件介紹
gulp-uglify —— 壓縮 javascript 文件；
gulp-clean-css —— 壓縮 css 文件；
gulp-concat —— 合併文件；
gulp-jshint —— js 文件語法檢測；
gulp-sass —— sass 編譯；
gulp-less —— less 編譯；
gulp-autoprefixer —— 自動添加 css 前綴；
gulp-p_w_picpathmin —— 圖片壓縮；
gulp-livereload —— 瀏覽器自動刷新；
gulp-rename —— 文件重命名； PS：以上這些插件，本套教程不會全部講到。但是隨着講解其中的一部分，我想你就能掌握使用 gulp 插件的方法。知道方法了，然後你就可以參考官方文檔去使用你想要的插件。
六、總結
1、安裝 node.js 和 npm；
2、新建 package.json 文件；
3、全局和本地安裝 gulp；
4、安裝 gulp 插件；
5、新建 gulpfile.js 文件；
6、通過命令提示符運行 gulp 任務；