• 寻找替代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']);
  • 相关阅读:
    通过代码学REST之二——Restlet框架学习
    页面解析工具:HtmlParser学习
    游标的使用
    软件测试工具杂谈
    XUL资料
    MYSQL5.1修改表名与复制表结构的定时器与存储过程
    mysql 5.7以上版本下载及安装
    AnyChart图表控件(一)简介
    AnyChart图表控件(二)优势
    踩坑 Pycharm 2020.1.1 安装/ JetBrains破解/ anacode配置
  • 原文地址:https://www.cnblogs.com/qinyulin/p/8526947.html
Copyright © 2020-2023  润新知