1，安装nodeJs
1.1、说明：gulp是基于nodeJS，理所当然需要安装nodeJS；
1.2、安装：打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）
1.3、node -v 查看安装的nodeJS版本，出现版本号，说明安装正确。PS：未能出现版本号，请尝试注销电脑重试。
1.4、npm -v 查看npm的版本号，npm是在安装nodeJS时一同安装的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：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用。
2.2.3，--save：将保存配置信息至package.json（package.json是nodeJS项目配置文件）；
2.2.4，-dev ：保存至pageage.json的devDependencies节点，不指定-dev将保存在dependencies节点；
2.2.5，为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。
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，当前目录已安装插件：npm list
2.8，查看npm帮助：npm help
3，选装cnpm
3.1，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常；
3.2，淘宝镜像官网：http://npm.taobao.org/
3.3，安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm
4，全局安装gulp
4.1，全局安装gulp目的是为了通过她执行gulp任务；
4.2，命令提示符执行cnpm install gulp -g
4.3，查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装；
5，新建package.json文件
5.1，package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
5.2，命令提示符执行npm init
注：package.json不能添加注释
6，安装gulp插件
6.1，定位目录后命令提示符执行npm install gulp-sass --save-dev
6.2，将会安装在node_modules的gulp-sass目录下
6.3，为了能正常使用，我们还得本地安装gulp：npm install gulp --save-dev
PS：我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
7，新建gulpfile.js文件
7.1，gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通JS文件（其实将gulpfile.js放入其他文件夹下亦可）
//导入工具包require('node_modules里对应模块')
vargulp=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：回调函数
//gulp.src(globs[, options])执行任务处理的文件globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options])处理完后文件生成路径
8，运行gulp
8.1，命令提示符执行：gulp 任务名称
8.2，编译sass：执行gulp testSass
8.3，当执行gulp default或gulp将会调用default任务里的所有任务[‘testSass’,’...’]
9，使用webstorm运行gulp任务
将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。
10，API
1、gulp.src(globs[, options])
1.1、说明：src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（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
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个属性buffer、read、base；
options.buffer： 类型：Boolean默认：true设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
options.read： 类型：Boolean默认：true设置false，将不执行读取文件操作，返回null；
options.base： 类型：String设置输出路径以某个路径的某个组成部分为基础向后拼接，具体看下面示例：
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指定文件输出路径，或者定义函数返回文件输出路径亦可；
2.3、options：类型(可选)：Object，有2个属性cwd、mode；
options.cwd： 类型：String默认：process.cwd()：前脚本的工作目录的路径当文件输出路径为相对路径将会用到；
options.mode： 类型：String默认：0777指定被创建文件夹的权限；
3、gulp.task(name[, deps], fn)
3.1、说明：task定义一个gulp任务；
3.2、name：类型(必填)：String指定任务的名称（不应该有空格）；
3.3、deps：类型(可选)：StringArray，该任务依赖的任务（注意：被依赖的任务需要返回当前任务的事件流，请参看下面示例）；
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 () { //执行完testLess任务后再执行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方法是用于监听文件变化，文件一修改就会执行指定的任务；
4.2、glob：需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
4.3、opts：类型(可选)：Object具体参看https://github.com/shama/gaze；
4.4、tasks：类型(必填)：StringArray需要执行的任务的名称数组；
4.5、cb(event)：类型(可选)：Function每个文件变化执行的回调函数；
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...');
});
});
