（最近一直搞angularjs.項目里非要用2個包管理器npm和bower，2個任務運行器webpage、gulp.我想BB。）
gulp是什么？
? ? ? ?gulp是基于Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。
? ? ? ?注：gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，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
廢話不多說，開干。。。
首先需要安裝node.node自帶npm管理包（node安裝過程這里不詳細講。百度很多）
? ? ?推薦使用淘寶的cnpm鏡像，因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了。淘寶cnpm官方網址
1.全局安裝gulp
? ? 全局命令提示符執行?cnpm install gulp -g
查看是否安裝成功 gulp -v
好，gulp的環境已經搞定了，接下來就是使用gulp,
2.gulp的實戰
創建app文件夾。在文件夾里添加package.json文件（package.json是node的配置文件）
package.json的代碼如下：
{
? ? "name": "test", ?
? ? "version": "1.0.0", ?
? ? "description": "test gulp", ?
? ? "homepage": "", ?
? ? "author": { ? ?
? ? ? ?"name": "lucky",
? ? ? ?"email": "*****@qq.com"
? ? },
? ? "license": "ISC", ? ?
? ? "devDependencies": { ? ?
? ? "gulp": "^3.8.11",
? ? "gulp-sass": "^2.3.2"
? ? }
}
同時創建 src 文件夾 和 dist 文件夾
接下來下載依賴包。在項目目錄下使用命令提示符執行 cnpm install
（注：package.json的注釋需要全部刪除。否則會報錯！！！）
成功之后，會多了對應的依賴文件了，說明成功。如圖
好了，在根目錄下創建gulpfile.js文件
? ? ?說明：gulpfile.js是gulp項目的配置文件，是位于項目根目錄的普通js文件（其實將gulpfile.js放入其他文件夾下亦可）。
gulpfilejs 的代碼如下：
//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
sass = require('gulp-sass');
//定義一個sass任務（自定義任務名稱）
gulp.task('sass', function () {
? ? ?gulp.src('src/sass/index.scss') //該任務針對的文件
? ? ? .pipe(sass()) //該任務調用的模塊
? ? ? .pipe(gulp.dest('dist/css')); //將會在src/css下生成index.css
});
gulp.task('default',['sass']); //定義默認任務
接著，在src里面創建css文件,在src里面創建sass文件夾，并在sass文件夾中創建index.scss；
index.scss代碼如下：
//sass style,如果不會sass語法，可百度
$primaryColor: #333;
$linkColor: #333;
body { ?
? ? ?color: $primaryColor;?
}
a{
? ? ?color:nth($linkColor,1);
? ? ?&:hover{
? ? ? ? ? color:nth($linkColor,2);
? ? ?}
}
接下來通過gulp 編譯sass文件.
運行命令行 gulp sass (sass 是在gulpfilejs自定義任務名稱)
查看dist的css文件下，就會通過gulp 輸出的css文件了。
如果我們每次都修改sass文件，我們每次都要去編輯命令？
其實我們可以利用gulp 的監聽方法，只要文件有修改就自動編譯。
接下來我們修改gulpfilejs文件，
gulpfilejs代碼：
//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
sass = require('gulp-sass');
//定義一個sass任務（自定義任務名稱）
gulp.task('sass', function () {
? ? ?gulp.src('src/sass/index.scss') //該任務針對的文件
? ? ? .pipe(sass()) //該任務調用的模塊
? ? ? .pipe(gulp.dest('dist/css')); //將會在src/css下生成index.css
});
gulp.task('default',['sass']); //定義默認任務
//新增的代碼。watch函數
//監聽任務,src/sass目錄下的所有sass文件
gulp.task('watch', ['sass'], function () {
? ? ?gulp.watch('src/sass/*.scss', ['sass']);
});
運行命令行 gulp watch
現在如果修改sass文件的話，gulp就會監聽，就會自動幫你編譯css文件了。
好了，gulp的最基本的教程就結束了，gulp還有很多的插件，我就不一一實現了。
