关于gulp入门之图片压缩

一、gulp中的图片压缩。

　　最初使用gulp-imagemin做测试。明明配置没问题，但是压缩的时候就会报错，具体原因在哪儿没找到，有可能是因为插件版本或者node版本的问题。于是改用第二个插件：gulp-tinypng-nokey

二、关于各个插件的对比

　　1、需要的插件包：npm install –save-dev gulp gulp-imagemin gulp-tinypng-compress gulp-tinypng-nokey

　　2、相关配置：

var gulp = require("gulp"),
    imagemin = require(\'gulp-imagemin\'),              //压缩图片1
    tinypng = require(\'gulp-tinypng-compress\'),       //压缩图片2 需要有KEY,下面有将怎样获取KEY值
    tinypng_nokey = require(\'gulp-tinypng-nokey\'),    //压缩图片3 免费
    runSequence = require(\'run-sequence\');


//图片压缩1 (感觉压缩程度不够)
gulp.task(\'compress_img\', function () {
    gulp.src(\'redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}\')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true       //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest(\'gulptest/yes/img\'))
});

//压缩图片2 (需要有KEY,并且每个月只有500张)
gulp.task(\'tinypng\', function() {
    gulp.src(\'redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}\')
        .pipe(tinypng({
            key: \'**************\',
            sigFile: \'gulptest/yes/img/.tinypng-sigs\',
            log: true
        }))
        .pipe(gulp.dest(\'gulptest/yes/img\'));
})

//压缩图片3 (免费 常用)
gulp.task(\'tp\', function() {
    gulp.src(\'redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}\')
        .pipe(tinypng_nokey ())
        .pipe(gulp.dest(\'gulptest/yes/img\'));
})

gulp.task(\'build\', function (done) {
    condition = false;
    runSequence(
        \'compress_img\',
        \'tinypng\',
        \'tp\',

    done);
});

三、压缩对比

　　见于https://blog.csdn.net/x550392236/article/details/78017346

四、其他gulp相关

 

1. gulp 给静态资源文件添加hash(md5)后缀 防止缓存
2. gulp-connect实现页面实时自动刷新
3. gulp-imagemin、gulp-tinypng-compress、gulp-tinypng-nokey图片压缩优化详解及对比
4. https://blog.csdn.net/x550392236/article/details/77117023