Gulp使用说明

一、gulp.js和grunt.js的区别

Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务…就这样反复下去。而在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。再回到正题上来，gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，这个我们暂时不用去深入理解，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了。
http://www.gulpjs.com.cn/ gulp中文网
http://gulpjs.com/ gulp官网
http://gulpjs.com/plugins/ gulp官方网站插件
https://www.npmjs.com/ npm包管理

二、安装gulp

全局安装gulp：npm install –glboal gulp
初始化你的项目目录：npm init ，创建package.json文件
在项目根目录安装：npm install –save-dev gulp
作为项目的开发依赖，安装的时候把gulp写进项目package.json文件的依赖中,

三、使用gulp

在项目根目录下创建一个名为gulpfile.js的文件，编写gulpfile.js文件，在gulpfile.js文件中定义我们的任务。如下图所示，它定义了一个默认的任务。

Gulp API介绍

使用gulp，仅需要知道4个API即可：
gulp.task()：定义任务，定义的任务可以直接在命令行运行 gulp ；
gulp.src()：这个方法用来读取你需要操作的文件，匹配到你想操作的文件；
gulp.dest()：写文件，将执行完一系列操作的文件进行重新写入，如将app.js和constants.js两个文件合并、压缩后的内容写入new.js文件中，可理解为输出路径；
gulp.watch()：用来监视文件的变化，当文件发生变化后，可以利用它来执行相应的任务，如你更改完一个js文件后，立即执行该js文件的压缩、合并任务；

gulp.src(globs[,options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
options为可选参数。通常情况下我们不需要用到。

Gulp用到的glob的匹配规则以及一些文件匹配技巧
gulp内部使用了node-glob模块来实现其文件匹配功能，我们可以使用下面这些特殊的字符来匹配我们想要的文件：
* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾。如可匹配：a.js、x.y、abc、abc/,但不能匹配a/b.js
.能匹配a.js、style.css、a.b、x.y
//*.js能匹配a/b/c.js、x/y/z.js，不能匹配a/b.js、a/b/c/d.js
** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了，能用来匹配所有的目录和文件。如果出现在末尾，也能匹配文件。
*/.js能匹配foo.js、a/foo.js、a/b/foo.js、a/b/c/foo.js
a/**/z能匹配a/z、a/b/z、a/b/c/z、a/d/g/h/j/k/z
a/**b/z 能匹配 a/b/z、a/sb/z,但不能匹配a/x/sb/z,因为只有单独出现才能匹配多级目录
? 匹配文件路径中的一个字符(不会匹配路径分隔符)，如?.js能匹配a.js，b.js，c.js；a??能匹配a.b、abc，但不能匹配ab/
[…] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
!(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)
@(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

当有多种匹配模式时可以使用数组：
gulp.src([‘js/.js’,’css/.css’,’*.html’]);
使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式
gulp.src([.js,’!b.js’]) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src([‘!b*.js’,*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：
a{b,c}d 会展开为 abd,acd
a{b,}c 会展开为 abc,ac
a{0..3}d 会展开为 a0d,a1d,a2d,a3d
a{b,c{d,e}f}g 会展开为 abg,acdfg,acefg
a{b,c}d{e,f}g 会展开为 abdeg,acdeg,abdeg,abdfg

gulp.dest(path[,options])

path为写入文件的路径
options为一个可选的参数对象，通常我们不需要用到
gulp的使用流程一般是这样子的：
首先通过gulp.src()方法获取到我们想要处理的文件流，
然后把文件流通过pipe方法导入到gulp的插件中，
最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中。

gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：（要想改变文件名，可以使用插件gulp-rename）

gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径
例如：

通过指定gulp.src()方法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()生成的文件路径。
当我们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，例如：
gulp.src(‘app/src/*/.css’) //此时base的值为 app/src
上面我们说的gulp.dest()所生成的文件路径的规则，其实也可以理解成，用我们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径。
例如：

用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

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

name 为任务名,如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
例如：

gulp中执行多个任务，可以通过任务依赖来实现。例如我想要执行one,two,three这三个任务，那我们就可以定义一个空的任务，然后把那三个任务当做这个空的任务的依赖就行了：

如果任务相互之间没有依赖，任务会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。

但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。例如：

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：
给出一个提示，来告知 task 什么时候执行完毕，
并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。
如果我们想等待异步任务中的异步操作完成后再执行后续的任务，有三种方法可以实现：
第一：在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。

第二：定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。

第三：返回一个promise对象，例如

 gulp.watch(glob [, opts], tasks) 

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组
例如：

或者gulp.watch(glob [, opts, cb])
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到
cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径

四、运行gulp

运行cmd，进入项目gulpfile.js文件根目录下，运行gulp，如果编写了watch方法监听，可直接运行gulp watch，进行实时监听。
执行gulp，则默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入gulp <task> <othertask>

五、一些常用的gulp插件(均在项目根目录安装)

①　自动加载插件 gulp-load-plugins
https://www.npmjs.com/package/gulp-load-plugins
安装：npm install –save-dev gulp-load-plugins
要使用gulp插件首先得用require来把插件加载进来，如果我们要使用的插件非常多，那我们的gulpfile.js文件开头可能就会是这个样子的：

虽然这没什么问题，但会使我们的gulpfile.js文件变得很冗长，看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。
gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:

然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件：

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。
实质上gulp-load-plugins是为我们做了如下的转换

gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。
最后要提醒的一点是，因为gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是已经安装好了的。
插件参数设置：
var gulp = require(‘gulp’);
Var plugins=require(‘gulp-load-plugins’)(); //无参数设置时
Var plugins=require(‘gulp-load-plugins’)({ //有参数设置时
DEBUG: false, // when set to true, the plugin will log info to console. Useful for bug reporting and issue debugging
pattern: [‘gulp-‘, ‘gulp.‘], // the glob(s) to search for
config: ‘package.json’, // where to find the plugins, by default searched up from process.cwd()
scope: [‘dependencies’, ‘devDependencies’, ‘peerDependencies’], // which keys in the config to look within
replaceString: /^gulp(-|.)/, // what to remove from the name of the module when adding it to the context
camelize: true, // if true, transforms hyphenated plugins names to camel case
lazy: true, // whether the plugins should be lazy loaded on demand
rename: {}, // a mapping of plugins to rename
renameFn: function (name) { … } // a function to handle the renaming of plugins (the default works)
});
例如给想使用的插件重命名gulp-ruby-sass为sass：
var plugins=require(‘gulp-load-plugins’)({
rename:{
‘gulp-ruby-sass’:’sass’
}
});

②　重命名插件 gulp-rename
https://www.npmjs.com/package/gulp-rename
安装：npm install –save-dev gulp-rename
用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

插件参数设置：
gulp.src(“./src/main/text/hello.txt”, { base: process.cwd() })
.pipe(rename({
dirname: “xxx”, //目录名，文件夹名。目录名/基础名.文件后缀名
basename: “xxx”, //基础名
prefix: “xxx”, //加前缀，在基础名上加前缀
suffix: “xxx”,//加后缀，在基础名上加后缀
extname: “xxx” // 文件后缀名 如.js ,.css。基础名.文件后缀名
}))
.pipe(gulp.dest(“./dist”));

例如：

③　js文件压缩插件 gulp-uglify
https://www.npmjs.com/package/gulp-uglify
安装：npm install –save-dev gulp-uglify
用来压缩js文件，使用的是uglify引擎

④　css文件压缩插件 gulp-minify-css / gulp-clean-css
https://www.npmjs.com/package/gulp-minify-css
https://www.npmjs.com/package/gulp-clean-css
安装：npm install –save-dev gulp-minify-css
安装：npm install –save-dev gulp-clean-css
gulp-minify-css压缩css文件:

gulp-clean-css压缩css文件：

⑤　html文件压缩插件 gulp-minify-html
https://www.npmjs.com/package/gulp-minify-html
https://www.npmjs.com/package/gulp-htmlmin
安装：npm install –save-dev gulp-minify-html
安装：npm i gulp-htmlmin –save-dev

使用gulp-minify-html进行压缩：

使用gulp-htmlmin进行压缩：

⑥　js代码检查插件 gulp-jshint
https://www.npmjs.com/package/gulp-jshint
安装：npm install –save-dev gulp-jshint
用来检查JS代码：

⑦　文件合并插件 gulp-concat
https://www.npmjs.com/package/gulp-concat
安装：npm install –save-dev gulp-concat
用来把多个文件合并为一个文件，我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了：

参数设置：

⑧　less编译插件 gulp-less
https://www.npmjs.com/package/gulp-less
安装：npm install –save-dev gulp-less
编译less文件，参数设置详见上述地址：

⑨　sass编译插件 gulp-sass
https://www.npmjs.com/package/gulp-sass
安装：npm install –save-dev gulp-sass
编译sass文件，参数设置详见上述地址：

⑩　图片压缩插件 gulp-imagemin
https://www.npmjs.com/package/gulp-imagemin
安装：npm install –save-dev gulp-imagemin
可以使用gulp-imagemin插件来压缩jpg、png、gif等图片:

ES6中新写法：

⑪　自动刷新页面插件 gulp-livereload
https://www.npmjs.com/package/gulp-livereload
安装:npm install –save-dev gulp-livereload
当代码变化时，它可以帮我们自动刷新页面，该插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件

⑫　gulp-util
⑬　解除任务间的依赖gulp-sequence
⑭　gulp-sourcemaps
⑮　补全浏览器兼容的css前缀 gulp-autoprefixer

Gulp插件列表地址：http://gulpjs.com/plugins/

1、在项目根目录下新建package.json文件
2、在项目根目录下新建gulpfile.js文件
3、编写gulpfile文件内容

• 引入依赖模块 var gulp = require(’ ‘)；
• 定义使用路径 var path = ” “；
• 定义task gulp.task（）；

4、运行gulp