gulp

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 <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，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的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 <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安装插件是从国外服务器下载，受网络影响大，可能出现异常；
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里对应模块')
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：回调函数

//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
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，将不执行读取文件操作，返回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 指定文件输出路径，或者定义函数返回文件输出路径亦可；

      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
1234567891011
gulp.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]    (https://github.com/shama/gaze)；

      4.4、tasks： 类型(必填)：StringArray 需要执行的任务的名称数组；

      4.5、cb(event)： 类型(可选)：Function 每个文件变化执行的回调函数；

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