Gulp教程之图片压缩

WEB前端 Gulp教程、Nodejs学习 2018年5月3日

Gulp.js 是一个自动化构建工具，Gulp 配置起来非常简单，可以利用Gulp实现很多功能，比如说配合gulp-imagemin实现图片压缩。下面雷雪松详细的介绍一下使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）。

1.、全局安装 gulp
[cc lang=”javascript” escaped=”true”]$ npm install –global gulp[/cc]

2、本地安装gulp-imagemin
[cc lang=”javascript” escaped=”true”]$ npm install gulp-imagemin –save-dev[/cc]

3、配置gulpfile.js任务（task）
a、基本用法
//将src/img目录下的图片压缩输出到dist/img目录
[cc lang=”javascript” escaped=”true”]var gulp = require(‘gulp’),
imagemin = require(‘gulp-imagemin’);

gulp.task(‘imagemin’, function () {
gulp.src(‘src/img/*.{png,jpg,gif,ico}’)
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：5 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.pipe(gulp.dest(‘dist/img’));
});[/cc]

b、使用imagemin-pngquant深度压缩图片
[cc lang=”javascript” escaped=”true”]$ npm install imagemin-pngquant –save-dev[/cc]

[cc lang=”javascript” escaped=”true”]var gulp = require(‘gulp’),
imagemin = require(‘gulp-imagemin’),
pngquant = require(‘imagemin-pngquant’);

gulp.task(‘imagemin’, function () {
gulp.src(‘src/img/*.{png,jpg,gif,ico}’)
.pipe(imagemin({
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest(‘dist/img’));
});[/cc]

5、gulp执行压缩图片任务
[cc lang=”javascript” escaped=”true”]$ gulp imagemin[/cc]

来源：Gulp教程之图片压缩