（一）什么是Gulp
gulp是前端开发过程中对代码进行构建的工具，它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
（二）Gulp的安装
首先确保已经正确安装了node.js环境，然后再以全局方式安装gulp，一定是全局
npm install -g gulp
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：
npm install gulp
为什么全局安装了gulp,本地还需要安装？
1.根据Node开发团队，本地模块加载更快；2.Node不考虑全局模块默认情况下使用本地模块；3.这样的话可以保证你的项目依赖gulp的版本（或其他依赖）采用的是最初的版本。
为什么本地安装了gulp,全局还需要安装？
全局安装gulp的理由是gulp在你的系统路径下自动执行会比较方便。
（三）gulp的用法
gulp.src()
指定数据源文件，产生数据流。参数是文件，可以是数组
gulp.src(path.src.css.common)
gulp.src(["js/**/*.js",[!js/**/*.min.js]])
gulp.dest()
将管道的输出写入文件，同事将这些输出继续输出，因此可以多次调用dest方法，将输出写入多个目录。目录不存在则新建。
.pipe(gulp.dest(path.dest + "css/"));
gulp.task()
//打包静态文件
gulp.task("build",["css","js","html","other"]);
定义一个任务build，执行三个子任务“css”、“js”、“imgs”。这些任务不是同时进行的，不能认为“js”任务结束时“css”任务已经结束。
如果需要确保一个任务在另一个任务结束后执行，可将函数和任务组合结合起来指定依赖关系。例如：
//执行默认任务时 先执行build任务,再执行default任务
gulp.task("default",["build"],function(){
gulp.watch()
//当监听到文件修改会触发相应的任务事件
gulp.watch(path.src.css,["css"]);
gulp里路径匹配规则
使用gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，
* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
? 匹配文件路径中的一个字符(不会匹配路径分隔符)
[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
* 能匹配 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
nmp 转换cmp 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
（四）Gulp在项目里的应用
1.安装好gulp后,首先要建它的配置文件gulpfile.js,然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。
2.定义任务
（1）将项目中需要用到的基于gulp的模块借助Node下载下来
例如：添加版本号的模块gulp-rev、gulp-rev-collector
$ npm install --save gulp-rev
$ npm install --save gulp-rev-collector
（2）然后是引入项目
gulp-ng-annotate/gulp-ng-min
这个插件是ng-annotate的gulp插件版，它解决的是Angular中依赖注入的小问题。Angular中通过参数名来进行依赖注入，一旦压缩，参数名就会变化导致注入失败，所以官方推荐通过添加字符串进行注入。代码如下：
angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) { }]);
但是一般大家都愿意简写成
angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) { });
所以gulp-ng-annotate/gulp-ng-min就是负责将大家简写的代码转换成官方推荐的写法来保证js压缩时，注入正常。
gulp-rev
在实际应用gulp-rev的过程中，尽管你写好了各个任务之间的依赖关系，任务执行顺序也无误，可实际上rev任务虽然在gulp上显示执行过了，但因为计算机机生成rev-manifest.json还需要时间，所以当gulp执行revCollector任务时，其实计算机还未生成rev-manifest.json。为了保证gulp-rev-collector替换文件成功，解决方法是要在每个任务里添加return，确保任务执行完，而不是执行过。或者使用gulp-run-sequence（还未验证）。
gulp-run-sequence
（'clean', 'compass', [image', 'style', 'html']，'ftp'），圆括号里面串行，中括号里面并行。
var runSequence = require('gulp-run-sequence');
gulp.task('prod', function(cb) {
runSequence('clean', 'compass', ['image', 'style', 'html'], 'ftp', cb);
});
gulp-connect
gulp-connect是开源的，它是一个静态web的服务（也可以通过使用gulp-livereload来定义静态web服务）。
a..定义一个server：
gulp.task('connect', function () {
connect.server({
root:'build',
livereload: true
});
});
其中root是服务启动的根目录，换句话说别人通过IP+Port端口访问到你的服务器所访问到文件夹就是root（这里是'app'），port就是端口了，livereload是一个标志，为true时gulp会自动检测文件的变化然后自动进行源码构建。
b.启动serve
项目里我通过用gulp的默认任务来启动
//定义默认任务
gulp.task('default', ['watch','connect']);
gulp-conact
gulp.task("scripts",function(){
gulp.src(["src/common/reqData.js","src/common/util.js"])
.pipe(uglify())
.pipe(concat("base.min.js",{
newLine: "\r\n\r\n"
}))
.pipe(gulp.dest("min/common"))
});
上例中，将src/common/目录下reqData.js和util.js压缩后合并成一个文件base.min.js，参数的作用是在两个文件之间添加两个换行。
（3）配置任务（我的项目是在转换路径以后再一次经过gulp来压缩，加后缀； ）
这里需要注意多个.pipe(rev.manifest())是生成不同的.json文件，所以需要输出到不同的地方；minJs({mangle:false})参数的作用是压缩过程跳过函数名使其不被压缩。
注意：gulp.src([path.resource,"!./webapp/js/date/**/*.{js,css}","!./webapp/css/news/**/*.{css,eot,svg,ttf,woff}"]) //需要处理的文件，放到一个字符串数组里
（就是将从你的文件里面把所有引用的静态资源群不替换掉）