npm 包 pngcrush 使用教程

对于前端开发者来说，优化图片大小是提高网站性能的重要一环。其中，压缩 PNG 图片是常用的优化方式之一。而 npm 包 pngcrush 是一个优秀的 PNG 压缩工具。

本文将详细介绍 pngcrush 的安装和使用方法，帮助读者更好地理解并掌握该工具的使用。

安装

首先，在使用 pngcrush 前，需要确保系统中已经安装了 node.js 和 npm。

在安装完 node.js 和 npm 之后，通过以下命令进行 pngcrush 的安装：

npm i pngcrush

使用方法

pngcrush 命令行工具提供了多种参数，下面介绍其中几个最常用的参数：

• -reduce：压缩图像大小。（可选参数，默认情况下已启用）
• -brute：使用 or 3 次尝试最好的压缩。（可选参数，默认情况下已启用）
• -ow：覆盖现有文件。（可选参数，默认情况下已启用）
• -fix：修复残缺的 PNG 文件，并尝试恢复所损失的数据。（可选参数，默认情况下已启用）

下面我们将通过实例详细说明 pngcrush 的使用方法。

实例

1. 压缩单个 PNG 文件

通过以下命令可以压缩单个 PNG 文件：

pngcrush -reduce -brute -ow input.png output.png

在执行完上述命令后，会生成一个 output.png 文件，该文件为压缩后的 PNG 文件。

1. 压缩多个 PNG 文件

如果需要压缩多个 PNG 文件，可以使用以下命令：

for file in *.png; do pngcrush -reduce -brute -ow "$file" "compressed/$file"; done

该命令将会压缩当前目录下的所有 PNG 文件，并将压缩后的文件存储在 compressed 文件夹中。

1. 部署到 CI/CD 环境中

我们可以将 pngcrush 集成到 CI/CD 中，实现图片的自动化压缩。

以 Travis CI 为例，我们可以使用以下 .travis.yml 文件：

language: node_js
node_js:
  - "12"
before_script:
  - npm i -g pngcrush
script:
  - pngcrush -reduce -brute -ow input.png output.png

将上述文件放在项目根目录中，并将需要压缩的 PNG 文件放在项目根目录中，执行以下命令即可部署：

travis deploy --pro

结语

通过本文的介绍，我们了解了 npm 包 pngcrush 的安装和使用方法，并提供了实例代码，帮助读者更好地理解该工具的使用。希望读者可以将 pngcrush 集成到自己的工作流中，从而更好地实现网站性能优化。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78335