使用gulp:
1.解决Javascript和CSS的版本问题.
2.解决Javascript和CSS的依赖，在加载顺序上的问题，构建工具可以大大的减少此类问题.
3.在性能优化上，当项目有大量的JS文件时，请求的文件越多耗时越大，这样无疑拖慢了网页的速度，而gulp能够通过：文件合并，文件压缩进行解决。
4.在效率的提升上gulp能够做到：
vendor前缀：在CSS3使用越来越多的时候，我们都知道一些CSS的特性，不同的浏览器CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀.
单元测试：JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常重要的
代码分析：我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。
HTML引用JavaScript或者CSS文件：比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和production版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决这些问题。
gulp和grunt的比较？
grunt：
配置过于复杂
插件职责不单一 （就是不SRP）
临时文件目录多
性能慢 （因为临时文件多，自然读IO多)
gulp:
代码优先.并且相对grunt代码更加的简洁明了
基于流
1000+的插件
gulp的安装和使用：
1.Gulp安装：
首先我们需要安装nodejs,通过 -v 检查是否安装成功和版本 node -v ,npm -v
进行全局安装:npm install gulp -g
全局安装后，还需要切换到项目的根目录下，单独为单个项目进行安装下；安装如下：npm install gulp
如果想在安装的时候把gulp写进package.json文件的依赖中，则可以加上 –save-dev 例：npm install gulp --save-dev
2.gulp的4个API：
1.gulp.task：
gulp.task(name [, deps, fn])
注册一个task, name 是task的名字，deps是可选项，就是这个task依赖的tasks, fn是task要执行的函数
2.gulp.src：
gulp.src(globs[, options])
与globs 匹配的文件，可以是string或者一个数组
3.gulp.dest
定义gulp.dest(path[, options]) 就是最终文件要输出的路径，options一般不用
4.gulp.watch
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。
3.使用gulp：
1.通过gulp init来创建并且配置package.config文件
2.手动创建gulpfile.js文件，gulp默认是调用该文件的
3.在DOS命令下下载需要的用插件如：npm install gulp-concat --save-dev
npm install gulp-strip-debug --save-dev
npm install gulp-uglify --save-dev
npm install gulp-jshint --save-dev
npm install gulp-rename --save-dev
在gulpfile中首先需要声明：var gulp = require(‘gulp‘);
var jshint = require(‘gulp-jshint‘);
gulp.task(‘jshint‘, function() {
gulp.src(‘./src/scripts/*.js‘)
.pipe(jshint())
.pie(jshint.reporter(‘default‘));
});
在DOS命令中执行：gulp jshint
理解gulp.watch()的使用：
var gulp = require(‘gulp‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var paths = {
scripts: [‘src/js/**/*.js‘],
css: [‘src/css/**/*.css‘],
// 把源文件html放在src下，会自动打包到指定目录下
html: [‘src/html/**/*.html‘]
};
gulp.task(‘scripts‘, function() {
return gulp.src(paths.scripts)
.pipe(concat(‘all.js‘))
.pipe(uglify())
.pipe(gulp.dest(‘build/js‘));
});
gulp.task(‘css‘, function() {
return gulp.src(paths.css)
.pipe(concat(‘all.css‘))
.pipe(gulp.dest(‘build/css‘));
});
// 监听html文件的改变
gulp.task(‘html‘,function(){
return gulp.src(paths.html)
.pipe(gulp.dest(‘html/‘));
});
// Rerun the task when a file changes
gulp.task(‘watch‘, function() {
gulp.watch(paths.scripts, [‘scripts‘]);
gulp.watch(paths.css, [‘css‘]);
gulp.watch(paths.html, [‘html‘]);
});
// The default task (called when you run `gulp` from cli)
gulp.task(‘default‘, [‘scripts‘, ‘css‘, ‘html‘,‘watch‘]);