1，安裝nodeJs

1.1、說明：gulp是基于nodeJS，理所當(dāng)然需要安裝nodeJS；

1.2、安裝：打開nodejs官網(wǎng)，點(diǎn)擊碩大的綠色Download按鈕，它會(huì)根據(jù)系統(tǒng)信息選擇對(duì)應(yīng)版本（.msi文件）

1.3、node -v 查看安裝的nodeJS版本，出現(xiàn)版本號(hào)，說明安裝正確。PS：未能出現(xiàn)版本號(hào)，請(qǐng)嘗試注銷電腦重試。

1.4、npm -v 查看npm的版本號(hào)，npm是在安裝nodeJS時(shí)一同安裝的nodeJS包管理器，

2，npm介紹

2.1，說明：npm（node package manager）nodeJs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）；

2.2，使用npm安裝插件：npm install [-g] [--save-dev]

2.2.1，：node插件名稱，例如：npm install gulp-less --save-dev

2.2.2，-g：全局安裝。將會(huì)安裝在C:\Users\Administrator\AppData\Roaming\npm，并且寫入系統(tǒng)環(huán)境變量；非全局安裝：將會(huì)安裝在當(dāng)前定位目錄；全局安裝可以通過命令行在任何地方調(diào)用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過require()調(diào)用。

2.2.3，--save：將保存配置信息至package.json（package.json是nodeJS項(xiàng)目配置文件）；

2.2.4，-dev ：保存至pageage.json的devDependencies節(jié)點(diǎn)，不指定-dev將保存在dependencies節(jié)點(diǎn)；

2.2.5，為什么要保存至package.json？因?yàn)閚ode插件包相對(duì)來說非常龐大，所以不加入版本管理，將配置信息寫入package.json并將其加入版本管理，其他開發(fā)者對(duì)應(yīng)下載即可（命令提示符執(zhí)行npm install，則會(huì)根據(jù)package.json下載所有需要的包，npm install --production只下載dependencies節(jié)點(diǎn)的包）。

2.3，使用npm卸載插件：npm uninstall [-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 [-g] [--save-dev]

2.6.1，更新全部插件：npm update [--save-dev]

2.7，當(dāng)前目錄已安裝插件：npm list

2.8，查看npm幫助：npm help

3，選裝cnpm

3.1，因?yàn)閚pm安裝插件是從國(guó)外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常；

3.2，淘寶鏡像官網(wǎng)：http://npm.taobao.org/

3.3，安裝：命令提示符執(zhí)行npm install cnpm -g --registry=https://registry.npm.taobao.org；注意：安裝完后最好查看其版本號(hào)cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會(huì)出現(xiàn)錯(cuò)誤；

注：cnpm跟npm用法完全一致，只是在執(zhí)行命令時(shí)將npm改為cnpm

4，全局安裝gulp

4.1，全局安裝gulp目的是為了通過她執(zhí)行g(shù)ulp任務(wù)；

4.2，命令提示符執(zhí)行cnpm install gulp -g

4.3，查看是否正確安裝：命令提示符執(zhí)行gulp -v，出現(xiàn)版本號(hào)即為正確安裝；

5，新建package.json文件

5.1，package.json是基于nodejs項(xiàng)目必不可少的配置文件，它是存放在項(xiàng)目根目錄的普通json文件；

5.2，命令提示符執(zhí)行npm init

注：package.json不能添加注釋

6，安裝gulp插件

6.1，定位目錄后命令提示符執(zhí)行npm install gulp-sass --save-dev

6.2，將會(huì)安裝在node_modules的gulp-sass目錄下

6.3，為了能正常使用，我們還得本地安裝gulp：npm install gulp --save-dev

PS：我們?nèi)职惭b了gulp，項(xiàng)目也安裝了gulp，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)，本地安裝gulp則是為了調(diào)用gulp插件的功能。

7，新建gulpfile.js文件

7.1，gulpfile.js是gulp項(xiàng)目的配置文件，是位于項(xiàng)目根目錄的普通JS文件（其實(shí)將gulpfile.js放入其他文件夾下亦可）

//導(dǎo)入工具包require('node_modules里對(duì)應(yīng)模塊')

vargulp=require('gulp'),//本地安裝gulp所用到的地方

less=require('gulp-sass');

//定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱）

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

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

.pipe(less())//該任務(wù)調(diào)用的模塊

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

});

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

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

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

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

8，運(yùn)行g(shù)ulp

8.1，命令提示符執(zhí)行：gulp 任務(wù)名稱

8.2，編譯sass：執(zhí)行g(shù)ulp testSass

8.3，當(dāng)執(zhí)行g(shù)ulp default或gulp將會(huì)調(diào)用default任務(wù)里的所有任務(wù)[‘testSass’,’...’]

9，使用webstorm運(yùn)行g(shù)ulp任務(wù)

將項(xiàng)目導(dǎo)入webstorm，右鍵gulpfile.js 選擇”Show Gulp Tasks”打開Gulp窗口，若出現(xiàn)”No task found”，選擇右鍵”Reload tasks”，雙擊運(yùn)行即可。

10，API

1、gulp.src(globs[, options])

1.1、說明：src方法是指定需要處理的源文件的路徑，gulp借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級(jí)的輸出，直接變成后一級(jí)的輸入，gulp.src返回當(dāng)前文件流至可用插件；

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

通配符路徑匹配示例：

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

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

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

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

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

JavaScript

1

2

3

4

5

6

7

8

9var 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個(gè)屬性buffer、read、base；

options.buffer： 類型：Boolean默認(rèn)：true設(shè)置為false，將返回file.content的流并且不緩沖文件，處理大文件時(shí)非常有用；

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

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

JavaScript

1

2

3

4

5

6

7gulp.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

1

2

3

4

5gulp.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個(gè)屬性cwd、mode；

options.cwd： 類型：String默認(rèn)：process.cwd()：前腳本的工作目錄的路徑當(dāng)文件輸出路徑為相對(duì)路徑將會(huì)用到；

options.mode： 類型：String默認(rèn)：0777指定被創(chuàng)建文件夾的權(quán)限；

3、gulp.task(name[, deps], fn)

3.1、說明：task定義一個(gè)gulp任務(wù)；

3.2、name：類型(必填)：String指定任務(wù)的名稱（不應(yīng)該有空格）；

3.3、deps：類型(可選)：StringArray，該任務(wù)依賴的任務(wù)（注意：被依賴的任務(wù)需要返回當(dāng)前任務(wù)的事件流，請(qǐng)參看下面示例）；

JavaScript

1

2

3

4

5

6

7

8

9

10

11gulp.task('testLess', function () {

return gulp.src(['less/style.less'])

.pipe(less())

.pipe(gulp.dest('./css'));

});

gulp.task('minicss', ['testLess'], function () { //執(zhí)行完testLess任務(wù)后再執(zhí)行minicss任務(wù)

gulp.src(['css/*.css'])

.pipe(minifyCss())

.pipe(gulp.dest('./dist/css'));

});

3.4、fn：類型(必填)：Function該任務(wù)調(diào)用的插件操作；

4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

4.1、說明：watch方法是用于監(jiān)聽文件變化，文件一修改就會(huì)執(zhí)行指定的任務(wù)；

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

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

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

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

JavaScript

1

2

3

4

5

6

7

8

9gulp.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...');

});

});