gulp学习整理

使用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.经过npm init来建立而且配置package.config文件
2.手动建立gulpfile.js文件，gulp默认是调用该文件的
3.在DOS命令下下载须要的用插件如:

• sass的编译（gulp-ruby-sass）
• 自动添加css前缀（gulp-autoprefixer）
• 压缩css（gulp-minify-css）
• js代码校验（gulp-jshint）
• 合并js文件（gulp-concat）
• 压缩js代码（gulp-uglify）
• 压缩图片（gulp-imagemin）
• 重命名（gulp-rename）
• 自动刷新页面（gulp-livereload）
• 图片缓存，只有图片替换了才压缩（gulp-cache）
• 更改提醒（gulp-notify）
• 清除文件（del）

在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

例子：

var gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
livereload = require('gulp-livereload'),
del = require('del');

//图片压缩
gulp.task('image', function() {
   gulp.src('img/*.+(jpg|png|gif|svg)')
   .pipe(imagemin()) //压缩
   .pipe(gulp.dest('img/images')); //输出
});

gulp.task('script', function() {
   gulp.src("./js/*.js")
   .pipe(jshint())
   .pipe(jshint.reporter('default'))
   .pipe(concat("main.js"))
   .pipe(gulp.dest('./main/'))
   .pipe(rename({
    suffix: ".min"
   }))
   .pipe(uglify())
   .pipe(gulp.dest("./main/"))
})

gulp.task('style', function() {
   gulp.src("./css/*.css")
   .pipe(less())
   .pipe(gulp.dest('./css/'))
   .pipe(livereload())
   .pipe(autoprefixer("last 2 version", 'safari5', 'ie8', 'ie9', 'opera12.1'))
   .pipe(gulp.dest("./maincss/"))
   .pipe(rename({
   suffix: ".min"
   }))
   .pipe(minifycss())
   .pipe(gulp.dest("./maincss/"))

})

gulp.task('default', function() {
　　gulp.run("style","script");
　　gulp.watch('./css/*.css', ['style'],'./js/*.js', ['script'], function() {
　　gulp.run("style","script");
});

})

})