• 寻找替代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']);
  • 相关阅读:
    初认识AngularJS
    (imcomplete) UVa 10127 Ones
    UVa 10061 How many zero's and how many digits?
    UVa 11728 Alternate Task
    UVa 11490 Just Another Problem
    UVa 10673 Play with Floor and Ceil
    JSON对象和字符串的收发(JS客户端用typeof()进行判断非常重要)
    HTML.ActionLink 和 Url.Action 的区别
    EASYUI TREE得到当前节点数据的GETDATA方法
    jqueery easyui tree把已选中的节点数据拼成json或者数组(非常重要)
  • 原文地址:https://www.cnblogs.com/qinyulin/p/8526947.html
Copyright © 2020-2023  润新知