Gulp教程(二)插件篇

Gulp教程(二)插件篇

你不得不了解的常用,实用的gulp插件,通过gulp插件解放你的开发生产力上限!

上文介绍了gulp的入门,本文将会对gulp的插件进行拓展,通过介绍gulp插件的用途和使用方法:

gulp

文件重命名

gulp-rename

gulp-rename主要用于在处理文件流后,对目标文件流进行重命名操作:

安装:npm install --save-dev gulp-rename

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
rename = require('gulp-rename'),
gulp.task('rename', function () {
gulp.src('js/mock.js')
.pipe(rename('mock.min.js')) //mock.js重命名为mock.min.js
.pipe(gulp.dest('dist'));
});

上述代码就是在文件dest输出之前,将源mock.js重命名为mock.min.js

js文件压缩

gulp-uglify

Js压缩,是日常开发中一个常见的步骤,通常是在把开发代码转到生产时,必须经常重复的步骤,gulp-uglify可有效的压缩js文件

安装:npm install --save-dev gulp-uglify

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src('js/*.js') // 要压缩的js文件
.pipe(uglify()) //使用uglify进行压缩
.pipe(gulp.dest('dist/js')); //压缩后的路径
});

上述代码就是将js目录下所有js文件进行uglify压缩,最后dest输出到dist/js文件目录上

css文件压缩

gulp-minify-css

除了js,css压缩也是常用的开发步骤:

安装:npm install --save-dev gulp-minify-css

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
cssmin = require("gulp-minify-css");
gulp.task('minify-css', function () {
gulp.src('css/*.css') // 要压缩的css文件
.pipe(cssmin()) //压缩css
.pipe(gulp.dest('dist/css'));
});

上述代码就是将css目录下所有css文件进行压缩,最后dest输出到dist/css文件目录上

html文件压缩

gulp-minify-html

除了js,css压缩也是常用的开发步骤:

安装:npm install --save-dev gulp-minify-html

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
htmlmin = require("gulp-minify-html");
gulp.task('minify-html', function () {
gulp.src('html/*.html') // 要压缩的html文件
.pipe(htmlmin()) //压缩
.pipe(gulp.dest('dist/html'));
});

上述代码就是将html目录下所有.html文件进行压缩,最后dest输出到dist/html文件目录上

自动补全CSS前缀

gulp-autoprefixer

手动对不同浏览器增加-webkit-,-ms-等前缀是一件相当麻烦且恶心的事情,此时我们需要gulp-autoprefixer:

安装:npm install --save-dev gulp-autoprefixer

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('minify-html', function () {
gulp.src('css/*.css') // 要压缩的html文件
.pipe(autoprefixer()) //压缩
.pipe(gulp.dest('dist/css'));
});

通过上面的代码,gulp会自动为我们对浏览器不支持的,或者针对各个浏览器进行追加css属性前缀

Sass预处理

gulp-compass

使用sass预处理已经是前端很常见的情景,因此针对Sass的编译,我们可以用gulp-compass:

安装:npm install --save-dev gulp-compass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// gulpfile.js
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('compass',function() {
return gulp.src('css/sass/*.scss')
.pipe(compass({
css: 'css/app',
sass: 'css/sass'
//image: 'img'
}))
.pipe(gulp.dest('css/app'))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('rev/css'));
});

通过上面的代码,gulp会自动把配置好的css/sass下的所有scss文件使用compass库进行scss文件的编译,同时还对css进行了前缀的追加和文件的压缩

脚本代码检查

gulp-jshint

代码在压缩之前,我们往往需要对源代码进行校验,如此繁琐的代码检查我们可以交给gulp-jshint去处理:

安装:npm install --save-dev gulp-jshint

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
jshint = require("gulp-jshint");
gulp.task('jsLint', function () {
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter()); // 输出检查结果
});

通过上面的代码,gulp-jshint会对js的代码进行完整的检查,如果出现了语法的错误,会输出检查结果

文件合并

gulp-concat

页面往往需要引入很多细小的库文件,但是http请求过多,会影响页面的加载性能,因此文件合并是常见的处理手法,这里我们可以用gulp-concat进行各类库文件的合并

安装:npm install --save-dev gulp-concat

1
2
3
4
5
6
7
8
9
// gulpfile.js
var gulp = require('gulp'),
concat = require("gulp-concat");
gulp.task('concat', function () {
gulp.src('libs/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
.pipe(gulp.dest('dist/js'));
});

通过上面的代码,gulp-concat会将libs下合并成一个all.js文件,并dest输出到dist/js目录

图片压缩

gulp-imagemin

同过压缩图片可以有效减少流量,gulp-imagemin可压缩jpg,png,gif等图片

安装:npm install --save-dev gulp-imagemin

1
2
3
4
5
6
7
8
9
10
11
12
13
// gulpfile.js
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
gulp.task('default', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant来压缩png图片
}))
.pipe(gulp.dest('dist'));
});

gulp-imagemin插件相对于其他插件的搭配使用更广,配置稍复杂,有兴趣的可以自行上官网补充

保存自动刷新

gulp-livereload

保存代码,自动刷新,从此解放我们的双手,那么空出的时间,双手可以干点什么呢[暗爽]

安装:npm install --save-dev gulp-livereload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// gulpfile.js
var gulp = require('gulp'),
compass = require('gulp-compass'),
livereload = require('gulp-livereload');
gulp.task('compass',function() {
return gulp.src('css/sass/*.scss')
.pipe(compass({
css: 'css/app',
sass: 'css/sass'
//image: 'img'
}))
.pipe(gulp.dest('css/app'))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('rev/css'));
});
gulp.task('watch', function() {
livereload.listen(); //要在这里调用listen()方法
gulp.watch('css/sass/*.scss', ['compass']);
});

当代码变化时,它可以帮我们自动刷新页面
该插件最好配合谷歌浏览器来使用,且要安装livereload chrome extension扩展插件,否则无法完成自动刷新

总结

到此,Gulp的常用实力插件已经讲完,虽然介绍的插件可能数量有点多,而且未必你需要所有的插件投入到你的日常工作中,但是我相信你至少会找到一个或几个你用的上的。