文中列举了三种方式,前两种主要还是imagemin插件,一种是常规方式,一种是自带的深度压缩方式,最后给出了更一种插件tinypng插件,相信前端小伙伴们都知道这个网站,唯一不好的就是使用这个插件前500张是免费的,但是一个邮箱可以申请一个KEY,一个KEY可以用500张,所以如果需求量大的可以多申请几个邮箱或者在官网上面用$购买。不多说贴出代码。
const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const pngquant = require('imagemin-pngquant'); const tinypng = require('gulp-tinypng-compress');
第一种方法:imagemin的常规方法
/*此方法只能压缩部分,比如说一个图片580K,这个方法只能压缩到510K,但是在tinyPny方法下可以压缩到100多k*/ gulp.task('imageMin', () => gulp.src('src/images/*') .pipe(imagemin({ optimizationLevel: 7, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/images')) );
第二种方法:增加了pngquant插件的高度压缩插件,但是测试了并没什么用。
/*此方法只能压缩部分,比如说一个图片580K,这个方法只能压缩到510K,但是在tinyPny方法下可以压缩到100多k*/ gulp.task('imageMin', () => gulp.src('src/images/*') .pipe(imagemin({ optimizationLevel: 7, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/images')) );
第三种方法:tinypng插件,官网上面直接压缩是只有单次20张数量、单张最大5M限制,总数没有限制。(https://tinypng.com/)
/*tinyPng要收费,效果不错,一个非QQ邮箱可以免费500张*/ gulp.task('tinyPng', () => gulp.src('src/images/*/*') .pipe(tinypng({ key: '自己申请的key',//qinyulin036@sina.com sigFile: 'images/.tinypng-sigs', log: true })).on('error', function(err) { console.error(err.message); }) .pipe(gulp.dest('dist/images')) );
最后的任务执行代码
gulp.task('default', ['imageMin']);