关于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