（最近一直搞angularjs.項目里非要用2個包管理器npm和bower奈泪，2個任務(wù)運行器webpage疾棵、gulp.我想BB戳稽。）
gulp是什么馆蠕？
? ? ? ?gulp是基于Nodejs的自動任務(wù)運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查荆几、合并吓妆、壓縮、格式化吨铸、瀏覽器自動刷新行拢、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟诞吱。在實現(xiàn)上舟奠，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出房维，直接變成后一級的輸入沼瘫，使得在操作上非常簡單。通過本文咙俩，我們將學習如何使用Gulp來改變開發(fā)流程耿戚，從而使開發(fā)更加快速高效。
? ? ? ?注：gulp 和 grunt 非常類似阿趁，但相比于 grunt 的頻繁 IO 操作膜蛔，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作脖阵。
gulp常用地址：
gulp官方網(wǎng)址：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安裝插件是從國外服務(wù)器下載蘑辑，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常搜立，如果npm的服務(wù)器在中國就好了以躯。淘寶cnpm官方網(wǎng)址
1.全局安裝gulp
? ? 全局命令提示符執(zhí)行?cnpm install gulp -g
查看是否安裝成功 gulp -v
好，gulp的環(huán)境已經(jīng)搞定了啄踊，接下來就是使用gulp,
2.gulp的實戰(zhàn)
創(chuàng)建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"
? ? }
}
同時創(chuàng)建 src 文件夾 和 dist 文件夾
接下來下載依賴包。在項目目錄下使用命令提示符執(zhí)行 cnpm install
（注：package.json的注釋需要全部刪除颠通。否則會報錯Ｖ吩巍！６倜獭）
成功之后谨垃，會多了對應(yīng)的依賴文件了启搂，說明成功。如圖
好了刘陶，在根目錄下創(chuàng)建gulpfile.js文件
? ? ?說明：gulpfile.js是gulp項目的配置文件胳赌，是位于項目根目錄的普通js文件（其實將gulpfile.js放入其他文件夾下亦可）。
gulpfilejs 的代碼如下：
//導(dǎo)入工具包 require('node_modules里對應(yīng)模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
sass = require('gulp-sass');
//定義一個sass任務(wù)（自定義任務(wù)名稱）
gulp.task('sass', function () {
? ? ?gulp.src('src/sass/index.scss') //該任務(wù)針對的文件
? ? ? .pipe(sass()) //該任務(wù)調(diào)用的模塊
? ? ? .pipe(gulp.dest('dist/css')); //將會在src/css下生成index.css
});
gulp.task('default',['sass']); //定義默認任務(wù)
接著匙隔，在src里面創(chuàng)建css文件,在src里面創(chuàng)建sass文件夾疑苫，并在sass文件夾中創(chuàng)建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自定義任務(wù)名稱)
查看dist的css文件下捍掺，就會通過gulp 輸出的css文件了。
如果我們每次都修改sass文件再膳，我們每次都要去編輯命令挺勿？
其實我們可以利用gulp 的監(jiān)聽方法，只要文件有修改就自動編譯喂柒。
接下來我們修改gulpfilejs文件不瓶，
gulpfilejs代碼：
//導(dǎo)入工具包 require('node_modules里對應(yīng)模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
sass = require('gulp-sass');
//定義一個sass任務(wù)（自定義任務(wù)名稱）
gulp.task('sass', function () {
? ? ?gulp.src('src/sass/index.scss') //該任務(wù)針對的文件
? ? ? .pipe(sass()) //該任務(wù)調(diào)用的模塊
? ? ? .pipe(gulp.dest('dist/css')); //將會在src/css下生成index.css
});
gulp.task('default',['sass']); //定義默認任務(wù)
//新增的代碼。watch函數(shù)
//監(jiān)聽任務(wù),src/sass目錄下的所有sass文件
gulp.task('watch', ['sass'], function () {
? ? ?gulp.watch('src/sass/*.scss', ['sass']);
});
運行命令行 gulp watch
現(xiàn)在如果修改sass文件的話灾杰，gulp就會監(jiān)聽湃番，就會自動幫你編譯css文件了。
好了吭露，gulp的最基本的教程就結(jié)束了，gulp還有很多的插件尊惰，我就不一一實現(xiàn)了讲竿。
