gulp-imagemin、gulp-tinypng-compress、gulp-tinypng-nokey图片压缩优化详解及对比

gulp详细入门教程传送门: http://blog.csdn.net/x550392236/article/details/77117023

一、安装需要的包

npm install --save-dev gulp gulp-imagemin gulp-tinypng-compress gulp-tinypng-nokey

二、配置gulpfile.js

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);
});