gulp的安装教程，使用教程，和简单的自动化任务教程

终端工具：cmder（或使用系统终端：win+R -> 输入cmd -> 回车） 

gulp官网地址：http://www.gulpjs.com.cn/ 
gulp中文文档：http://www.gulpjs.com.cn/docs/ 
gulp插件地址：http://gulpjs.com/plugins 
gulpAPI地址：http://www.gulpjs.com.cn/docs/api/

1.安装node

window下，下载node安装即可。 
node下载地址：http://nodejs.cn/download/ 
安装比较简单，基本一直下一步即可，安装路径随意。

安装完成后，终端输入如下命令 显示版本号即安装成功。

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">node <span class="hljs-attribute" style="box-sizing: border-box;">-v</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.0368323; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

2.推荐安装 cnpm

npm服务器在国外，网络影响大，甚至还会遇到需要翻墙才能下载插件的情况，因此推荐安装cnpm。

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。后面的演示均使用cnpm 
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。后面的演示均使用cnpm 
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。后面的演示均使用cnpm 
重要的事情说三遍

【淘宝npm镜像，这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步】。 
镜像地址：http://npm.taobao.org/

2.1安装cnpm

执行 npm install cnpm -g --registry=https://registry.npm.taobao.org

2.2检测cnpm是否安装成功

执行cnpm -v 显示版本号即安装成功 

3.全局安装gulp

3.1 全局安装gulp

执行cnpm install gulp -g

3.2检测gulp是否安装成功

执行gulp -v 显示版本号即安装成功 

4.项目文件根目录新建package.json

注：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件重点内容

4.1进入你的项目文件

示例：进入 D:/WWW/test 项目文件夹中 

4.2新建package.json

执行命令cnpm init 

4.3检测package.json是否成功新建

查看项目文件根目录，是否新建package.json，且内容是否和你终端中输入的一致。 
package.json内容如下：

<code class="hljs json has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">{  "<span class="hljs-attribute" style="box-sizing: border-box;">name</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test"</span></span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">version</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1.0.0"</span></span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">description</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"我是描述"</span></span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">main</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index.js"</span></span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">scripts</span>": <span class="hljs-value" style="box-sizing: border-box;">{    "<span class="hljs-attribute" style="box-sizing: border-box;">test</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"echo \"Error: no test specified\" && exit 1"</span>  </span>}</span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">author</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span></span>,  "<span class="hljs-attribute" style="box-sizing: border-box;">license</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ISC"</span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.0368323; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

注：可不使用cnpm init方式，可选择手动创建package.json配置文件

5.本地安装gulp插件

5.1本地安装gulp

注：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

进入你的项目文件路径中后，执行cnpm install gulp --save-dev 

注：项目文件中多了 node_modules 文件夹，里面是你本地安装的插件

5.2安装gulp-sass插件

进入你的项目文件路径中后，执行cnpm install gulp-sass --save-dev

6.新建gulpfile.js（重要，重要，重要）

gulpfile.js是gulp的配置文件，放于根目录中。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//gulpfile.js 示例文件</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//导入你所需要用的工具包 require('node_modules里对应模块')</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> gulp = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">require</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'gulp'</span>),    sass = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">require</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'gulp-sass'</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// scss 任务</span>gulp.task(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sass'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> gulp.src(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'src/css/test.scss'</span>) <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取该任务需要的文件</span>      .pipe( sass() )                  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//该任务调用的模块</span>      .pipe( gulp.dest(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'src/css'</span>) );   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//将在 src/css 文件夹中生产test.css</span>});<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 默认任务</span>gulp.task(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'default'</span>,[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sass'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'watch1'</span>]);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//监听文件</span>gulp.task(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'watch1'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> gulp.watch(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'src/css/test.scss'</span>,[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sass'</span>]);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//监听 src/css/test.scss 文件，修改时自动执行 sass 任务。</span>});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.0368323; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

详细gulp api介绍，可参考官网：http://www.gulpjs.com.cn/docs/api/

7.运行gulp

7.1 执行gulp 任务名称 运行该任务 
示例：gulp sass 执行gulpfile.js中的sass任务 
 
7.2 执行gulp 调用default中的所有任务 
 
如图：开启监听事件，当 src/css/test.scss 发生修改时，会自动执行sass任务。 

8.常用插件

1. sass的编译（gulp-sass）
2. less编译 （gulp-less）
3. 重命名（gulp-rename）
4. 图片转换为base64-encoded （gulp-img64）
5. 自动添加css前缀（gulp-autoprefixer）
6. 压缩css（gulp-clean-css）
7. js代码校验（gulp-jshint）
8. 合并js文件（gulp-concat）
9. 压缩js代码（gulp-uglify）
10. 压缩图片（gulp-imagemin）
11. 自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）
12. 图片缓存，只有图片替换了才压缩（gulp-cache）
13. 更改提醒（gulp-notify）
14. 阻止 gulp 插件发生错误导致进程退出并输出错误日志(gulp-plumber)

9.关于匹配

1. 列表内容

Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

• *匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
• ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
• ? 匹配文件路径中的一个字符(不会匹配路径分隔符)
• [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似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)

下面以一系列例子来加深理解

• *能匹配 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
• ** 能匹配 abc，a/b.js，a/b/c.js，x/y/z，x/y/z/a.b，能用来匹配所有的目录和文件
• **/*.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/，因为它不会匹配路径分隔符
• [xyz].js 只能匹配 x.js，y.js，z.js，不会匹配xy.js，xyz.js等，整个中括号只代表一个字符
• [^xyz].js 能匹配 a.js，b.js，c.js等，不能匹配x.js，y.js，z.js 
  当有多种匹配模式时可以使用数组

//使用数组的方式来匹配多种文件

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">gulp.src([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'js/*.js'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'css/*.css'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'*.html'</span>])</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.0368323; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">gulp.src([*.js,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'!b*.js'</span>]) <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//匹配所有js文件，但排除掉以b开头的js文件</span>gulp.src([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'!b*.js'</span>,*.js]) <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//不会排除任何文件，因为排除模式不能出现在数组的第一个元素中</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.0368323; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：

• 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

10.结束，参考文章

本文参考借鉴多篇文章 在 加上自己的实际测试后，写了这篇文章。 
如有不妥之处和疑问的地方，请留言赐教，谢谢。 
关于gulp的介绍，可参考官网： 
gulp官网地址：http://www.gulpjs.com.cn/ 
gulp中文文档：http://www.gulpjs.com.cn/docs/ 
gulp插件地址：http://gulpjs.com/plugins 
gulpAPI地址：http://www.gulpjs.com.cn/docs/api/ 
本文还参考了文章： 
http://www.cnblogs.com/2050/p/4198792.html 
http://www.ydcss.com/archives/18