1冰抢，安裝nodeJs
1.1显熏、說明：gulp是基于nodeJS，理所當然需要安裝nodeJS晒屎；
1.2、安裝：打開nodejs官網缓升，點擊碩大的綠色Download按鈕鼓鲁，它會根據(jù)系統(tǒng)信息選擇對應版本（.msi文件）
1.3、node -v 查看安裝的nodeJS版本港谊，出現(xiàn)版本號骇吭，說明安裝正確。PS：未能出現(xiàn)版本號歧寺，請嘗試注銷電腦重試燥狰。
1.4、npm -v 查看npm的版本號斜筐，npm是在安裝nodeJS時一同安裝的nodeJS包管理器龙致，
2，npm介紹
2.1顷链，說明：npm（node package manager）nodeJs的包管理器目代，用于node插件管理（包括安裝、卸載嗤练、管理依賴等）榛了；
2.2，使用npm安裝插件：npm install <name> [-g] [--save-dev]
2.2.1煞抬，<name>：node插件名稱霜大，例如：npm install gulp-less --save-dev
2.2.2，-g：全局安裝革答。將會安裝在C:\Users\Administrator\AppData\Roaming\npm战坤，并且寫入系統(tǒng)環(huán)境變量曙强；非全局安裝：將會安裝在當前定位目錄；全局安裝可以通過命令行在任何地方調用它湖笨，本地安裝將安裝在定位目錄的node_modules文件夾下旗扑，通過require()調用。
2.2.3慈省，--save：將保存配置信息至package.json（package.json是nodeJS項目配置文件）臀防；
2.2.4，-dev ：保存至pageage.json的devDependencies節(jié)點边败，不指定-dev將保存在dependencies節(jié)點袱衷；
2.2.5，為什么要保存至package.json笑窜？因為node插件包相對來說非常龐大致燥，所以不加入版本管理，將配置信息寫入package.json并將其加入版本管理排截，其他開發(fā)者對應下載即可（命令提示符執(zhí)行npm install嫌蚤，則會根據(jù)package.json下載所有需要的包，npm install --production只下載dependencies節(jié)點的包）断傲。
2.3脱吱，使用npm卸載插件：npm uninstall <name> [-g] [--save-dev] PS：不要直接刪除本地插件包
2.4，刪除全部插件：npm uninstall gulp-less gulp-concat......认罩？太麻煩
2.5箱蝠，借助rimraf：npm iinstall rimraf -g 用法：rimraf node_modules
2.6，使用npm更新插件：npm update <name> [-g] [--save-dev]
2.6.1垦垂，更新全部插件：npm update [--save-dev]
2.7宦搬，當前目錄已安裝插件：npm list
2.8，查看npm幫助：npm help
3劫拗，選裝cnpm
3.1间校，因為npm安裝插件是從國外服務器下載，受網絡影響大杨幼，可能出現(xiàn)異常撇簿；
3.2，淘寶鏡像官網：http://npm.taobao.org/
3.3差购，安裝：命令提示符執(zhí)行npm install cnpm -g --registry=https://registry.npm.taobao.org四瘫；注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現(xiàn)錯誤欲逃；
注：cnpm跟npm用法完全一致找蜜，只是在執(zhí)行命令時將npm改為cnpm
4，全局安裝gulp
4.1稳析，全局安裝gulp目的是為了通過她執(zhí)行gulp任務洗做；
4.2弓叛，命令提示符執(zhí)行cnpm install gulp -g
4.3，查看是否正確安裝：命令提示符執(zhí)行gulp -v诚纸，出現(xiàn)版本號即為正確安裝撰筷；
5，新建package.json文件
5.1畦徘，package.json是基于nodejs項目必不可少的配置文件毕籽，它是存放在項目根目錄的普通json文件；
5.2井辆，命令提示符執(zhí)行npm init
注：package.json不能添加注釋
6关筒，安裝gulp插件
6.1，定位目錄后命令提示符執(zhí)行npm install gulp-sass --save-dev
6.2杯缺，將會安裝在node_modules的gulp-sass目錄下
6.3蒸播，為了能正常使用，我們還得本地安裝gulp：npm install gulp --save-dev
PS：我們全局安裝了gulp萍肆，項目也安裝了gulp袍榆，全局安裝gulp是為了執(zhí)行gulp任務，本地安裝gulp則是為了調用gulp插件的功能塘揣。
7蜡塌，新建gulpfile.js文件
7.1，gulpfile.js是gulp項目的配置文件勿负，是位于項目根目錄的普通JS文件（其實將gulpfile.js放入其他文件夾下亦可）
//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
less = require('gulp-sass');
//定義一個testLess任務（自定義任務名稱）

gulp.task('testSass', function () {

gulp.src('src/less/index.less') //該任務針對的文件

.pipe(less()) //該任務調用的模塊

.pipe(gulp.dest('src/css')); //將會在src/css下生成index.css

});

gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask為其他任務，該示例沒有定義elseTask任務

//gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數(shù)

//gulp.src(globs[, options]) 執(zhí)行任務處理的文件 globs：處理的文件路徑(字符串或者字符串數(shù)組)

//gulp.dest(path[, options]) 處理完后文件生成路徑

8劳曹，運行gulp
8.1奴愉，命令提示符執(zhí)行：gulp 任務名稱
8.2，編譯sass：執(zhí)行gulp testSass
8.3铁孵，當執(zhí)行gulp default或gulp將會調用default任務里的所有任務[‘testSass’,’...’]
9锭硼，使用webstorm運行gulp任務
將項目導入webstorm，右鍵gulpfile.js 選擇”Show Gulp Tasks”打開Gulp窗口蜕劝，若出現(xiàn)”No task found”檀头，選擇右鍵”Reload tasks”，雙擊運行即可岖沛。
10暑始，API
1、gulp.src(globs[, options])
1.1婴削、說明：src方法是指定需要處理的源文件的路徑廊镜，gulp借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出唉俗，直接變成后一級的輸入嗤朴，gulp.src返回當前文件流至可用插件配椭；

1.2、globs： 需要處理的源文件匹配符路徑雹姊。類型(必填)：String or StringArray股缸；

通配符路徑匹配示例：

“src/a.js”：指定具體文件；

“”：匹配所有文件 例：src/.js(包含src下的所有js文件)吱雏；

“”：匹配0個或多個子文件夾 例：src//*.js(包含src的0個或多個子文件夾下的js文件)敦姻；

“{}”：匹配多個屬性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)坎背；

JavaScript
123456789
var gulp = require('gulp'),less = require('gulp-less');gulp.task('testLess', function () {//gulp.src('less/test/style.less')gulp.src(['less//.less','!less/{extend,page}/.less']).pipe(less()).pipe(gulp.dest('./css'));});

1.3替劈、options： 類型(可選)：Object，有3個屬性buffer得滤、read陨献、base；

options.buffer： 類型：Boolean 默認：true 設置為false懂更，將返回file.content的流并且不緩沖文件眨业，處理大文件時非常有用；

options.read： 類型：Boolean 默認：true 設置false沮协，將不執(zhí)行讀取文件操作龄捡，返回null；

options.base： 類型：String 設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接慷暂，具體看下面示例：

JavaScript
1234567
gulp.src('client/js//.js') .pipe(minify()).pipe(gulp.dest('build')); // Writes 'build/somedir/somefile.js'gulp.src('client/js//.js', { base: 'client' }).pipe(minify()).pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'

2聘殖、gulp.dest(path[, options])
2.1、說明：dest方法是指定處理完后文件輸出的路徑行瑞；
JavaScript
12345
gulp.src('./client/templates/*.jade').pipe(jade()).pipe(gulp.dest('./build/templates')).pipe(minify()).pipe(gulp.dest('./build/minified_templates'));

      2.2奸腺、path： 類型(必填)：String or Function 指定文件輸出路徑，或者定義函數(shù)返回文件輸出路徑亦可血久；

      2.3突照、options： 類型(可選)：Object，有2個屬性cwd氧吐、mode讹蘑；

options.cwd： 類型：String 默認：process.cwd()：前腳本的工作目錄的路徑 當文件輸出路徑為相對路徑將會用到；

options.mode： 類型：String 默認：0777 指定被創(chuàng)建文件夾的權限筑舅；

3座慰、gulp.task(name[, deps], fn)
3.1、說明：task定義一個gulp任務翠拣；

  3.2角骤、name： 類型(必填)：String 指定任務的名稱（不應該有空格）；

    3.3、deps： 類型(可選)：StringArray邦尊，該任務依賴的任務（注意：被依賴的任務需要返回當前任務的事件流背桐，請參看下面示例）；

JavaScript
1234567891011
gulp.task('testLess', function () {return gulp.src(['less/style.less']).pipe(less()).pipe(gulp.dest('./css'));});gulp.task('minicss', ['testLess'], function () { //執(zhí)行完testLess任務后再執(zhí)行minicss任務gulp.src(['css/*.css']).pipe(minifyCss()).pipe(gulp.dest('./dist/css'));});

    3.4蝉揍、fn： 類型(必填)：Function 該任務調用的插件操作链峭；

4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
4.1又沾、說明：watch方法是用于監(jiān)聽文件變化弊仪，文件一修改就會執(zhí)行指定的任務；

    4.2杖刷、glob： 需要處理的源文件匹配符路徑励饵。類型(必填)：String or StringArray；

     4.3滑燃、opts： 類型(可選)：Object 具體參看[https://github.com/shama/gaze]    (https://github.com/shama/gaze)役听；

      4.4、tasks： 類型(必填)：StringArray 需要執(zhí)行的任務的名稱數(shù)組表窘；

      4.5典予、cb(event)： 類型(可選)：Function 每個文件變化執(zhí)行的回調函數(shù)；

JavaScript
123456789
gulp.task('watch1', function () {gulp.watch('less//.less', ['testLess']);});gulp.task('watch2', function () {gulp.watch('js//.js', function (event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});