CocosCreator和gulp-使用tinypng批量压缩图片

上篇文章介绍了如何用gulp-imagemin插件来自动批量压缩CocosCreator项目的图片资源，imagemin虽然使用方便且免费，但缺点也很明显，就是耗时长而且压缩比不高（压缩后大概比原图小10-15%）。

其实还有一个更牛的压缩神器，叫 tinypng（官网： https://tinypng.com/），它的压缩比可以达到惊人的50-70%，且基本无损。
tinypng的使用方式有很多种，有桌面应用程序、Web方式（直接在浏览器中选择图片），也有PhotoShop插件。不过这些都收费，当然也可免费申请试用。它的压缩过程是把图片通过https方式上传到tinypng服务器进行压缩，然后再下载回来。

这里要介绍的是tinypng官方提供的gulp插件，但使用时必须有KEY，这个KEY也可以在官网上免费申请，但免费的只能每月压缩500张图片。

安装 tinypng 插件

在项目根目录输入命令

$ npm install gulp-tinypng-compress -save-dev

编写任务

var gulp = require("gulp");
var tinypng = require('gulp-tinypng-compress');

gulp.task('tinypng', function (cb) {
    gulp.src('./build/web-mobile/**/*.{png,jpg,jpeg}')
        .pipe(tinypng({
            key: 'xxxx',
            sigFile: './build/.tinypng-sigs',
            log: true
        }))
        .pipe(gulp.dest("./build/web-mobile/"))
        .on("end", cb);
});

注意：上面代码中的key值，必须是自己从tinypng官网申请的有效key，否则运行会报错。

官网申请地址：https://tinypng.com/developers

运行任务

$ gulp tinypng

结果

输入和输出目录都是 ./build/web-mobile，通过文件夹大小的前后对比，可以看到，压缩后通常能小50%以上。