jz-img-compress

前端项目中用到的图片资源在上线之前都是需要压缩处理的，由于手动对每张图片做压缩不仅繁琐，而且容易忘记。
tinypng.com 网站提供了api接口，可以通过工具自动压缩，因此开发了这个工具，用于自动执行图片压缩操作。

安装

npm i jz-img-compress --save-dev
or
yarn add jz-img-compress -D

配置

配置项目的package.json文件，如下:

{
  "name": "example-app",
  ...
  "scripts": {
    "compress": "cross-env JZ_COMPRESS_KEY=<your api key> jz-compress"
  },
  "jz-compress": {
    "targets": [
      "src/assets/images"
    ],
    "cache": ".cache/img-compress.json"
  }
}

配置项

1. api key

工具在运行时需要使用api key，会自动从环境变量中读取 JZ_COMPRESS_KEY 变量作为 key 的值，所以可以通过 配置scripts中的命令，如上所示。

2. targets

图片资源所在的目录，如果图片资源分布在多个目录下的话，可以提供多个位置。

由于 tinypng.com 目前只支持 png/jpg 格式的图片，因此该工具只会处理目录下面的 png/jpg 格式的图片， 目录下的其他资源会自动被忽略

3. cache

为了节约 api 资源，工具会对压缩之后的结果进行缓存，二次压缩会被忽略。
该配置用于指定缓存文件的位置，默认为 .cache/img-compress.json

运行

npm run compress

运行示例