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

});

});