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");
});

})

})

posted @ 2016-08-06 15:48 天行健丶阅读(288) 评论(0) 编辑收藏举报

天行健丶

gulp学习整理

公告