版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84751813
需求说明：
- 压缩图片，减少图片体积。
- 因为压缩图片比较耗时，我们只需要压缩修改的图片，没有修改的直接从缓存中读取。
一、安装gulp-imagemin、gulp-cache
npm i -D gulp-imagemin gulp-cache
二、gulp-imagemin参数说明
/**
* @param plugins {Array}
* default: （不支持的文件将被忽略）
* [
* imagemin.gifsicle(), 压缩GIF
* imagemin.jpegtran(), 压缩JPEG
* imagemin.optipng(), 压缩PNG
* imagemin.svgo() 压缩SVG
* ]
*
* @param options {Object}
* {
* optimizationLevel {Number} 取值范围：0-7（优化等级），默认：3
* progressive {Boolean} 无损压缩jpg图片，默认：false
* interlaced {Boolean} 隔行扫描gif进行渲染，默认：false
* multipass {Boolean} 多次优化svg直到完全优化，默认：false
* }
*/
imagemin([plugins], [options])
三、gulp-imagemin配置使用
var imagemin = require('gulp-imagemin');
gulp.task('images', function () {
return gulp.src('./src/images/**')
.pipe(gulpif(env==='build', imagemin({
optimizationLevel: 5, // 取值范围：0-7（优化等级），默认：3
progressive: true, // 无损压缩jpg图片，默认：false
interlaced: true, // 隔行扫描gif进行渲染，默认：false
multipass: true // 多次优化svg直到完全优化，默认：false
})))
.pipe(gulp.dest('./dist/images'));
});
四、gulp-cache使用
由于压缩图片比较耗时，我们只需要压缩修改的图片，没有修改的直接从缓存中读取。这就需要用到gulp-cache模块
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('images', function () {
return gulp.src('./src/images/**')
.pipe(gulpif(env==='build', cache(imagemin({
optimizationLevel: 5, // 取值范围：0-7（优化等级），默认：3
progressive: true, // 无损压缩jpg图片，默认：false
interlaced: true, // 隔行扫描gif进行渲染，默认：false
multipass: true // 多次优化svg直到完全优化，默认：false
}))))
.pipe(gulp.dest('./dist/images'));
});
五、缓存效果预览
1、压缩图片，如下：
压缩所有图片（3张），耗时8.7s
2、增加一个图片之后，再次压缩，如下：
只是压缩了一张图片，耗时685ms
.
项目地址（别忘了给星哦）
相关文章
gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题