欢迎各位来到我的博客,希望大家可以一起多多交流技术!

寻找替代imagemin更好的插件

 文中列举了三种方式,前两种主要还是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']);

 

posted @ 2018-03-08 10:32  秦渝淋  阅读(511)  评论(0编辑  收藏  举报