用tinypng插件创建gulp task压缩图片

TinyPng 是什么

官方介绍：

Smart PNG and JPEG compression
Optimize your images with a perfect balance in quality and file size.

用户体验： 它能帮我很好的压缩png,jpeg,大的压缩率并且能保证图片质量，肉眼看不出图片的变化。
此外它支持做为 photoshop插件，提供php， nodejs等api 具体内容，请看这里

创建gulp task

我想建一个gulp任务来帮我压缩项目图片，不需要一张张上传到官方网站再下载。（不能想象，这种蠢笨的事情我干过）

官方提供了一个node包，gulp-tinypng但是我没有用它尝试，有兴趣的朋友可以尝试一下。我用了这个插件gulp-tinypng-compress。使用tinypng需要到官方注册你的邮件，拿到你的key，并且有限制每月免费500张，后续会收费。并且在执行task的时候，最好有vpn不然会很慢。

// 图片压缩

    var gulp = require('gulp');
    var tinypng = require('gulp-tinypng-compress');
    
    gulp.task("tinypng", function(){
        gulp.src('img/**/*.{png,jpg,jpeg}')
            .pipe(tinypng({
                key: '-HERE IS YOUR API KEY-',
                sigFile: 'images/.tinypng-sigs',
                log: true
            })).on('error', function(err) {
                console.error(err.message);
            })
            .pipe(gulp.dest('dis/img'));
    });

我个人实践后的效果很明显，原先所有图片有43.6MB，压缩后只有15.5MB。