新公司的项目中,因为单个项目都比较小,所以并没有引入打包工具(gulp或者webpack等),大家普遍在自己去tinypng网站自己压缩图片。面对这个问题,就自己写了一个小脚本,通过调用tinypng的API实现一键压缩。

目的:

压缩指定文件夹下的png和jpg图片。

原理:

采用tinypng的api,优点是压缩度大,质量好,缺点是每月限额500张。

开发过程:

  1. 引入了一个叫做tinify的npm包:

    1
    2
    3
    4
    5
    6
    7
    const tinify = require("tinify");
    /* 这个api是在 https://tinypng.com/developers 申请的,每个邮箱每个月只能压500张 */
    tinify.key = "lgwr26XdUj-ExIlL8O_mPwb1-Uadp5fL";
    tinify.fromFile(filePath).toFile(filePath);
  2. 扫描一个指定文件夹里所有png和jpg图片:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function readFile(path) {
    var files = fs.readdirSync(path);
    files.forEach(ergodic);
    function ergodic(file) {
    var filePath = path + '/' + file;
    var states = fs.statSync(filePath);
    if (states.isDirectory())
    {
    // 如果是一个文件夹,就再次读取里面
    readFile(filePath);
    } else
    {
    // 看一下是不是图片, 是的话就开始压缩
    if (filePath.substr(-3, 3) === 'png' || filePath.substr(-3, 3) === 'jpg')
    {
    tinify.fromFile(filePath).toFile(filePath);
    }
    }
    }
    }

用法:

在当前文件夹app\dev-static\tester\tinyimg下打开命令行

输入”node tinyimg {你要压缩的文件夹}”

注:文件夹路径是以app/v2为起点

示例:

1
2
node tinyimg zt/2017/whisper
node tinyimg views/musician

注意事项:

  • 暂时只支持 zt和views两个文件夹。