如果你是一个前端工程师，那么你应该知道图片压缩的重要性和方法。通常情况下，我们使用在线工具或相应软件来压缩图片。但是，对于复杂而又多样的项目，手动压缩图片显然不是一个明智的选择。
在这里，我想介绍一个 npm 包——smushers，它可以自动将你的项目中的图片压缩，而且只需一次安装便可自动执行。下面，我们一起来学习如何使用它吧。
安装
在你的项目中，运行以下命令安装 smushers：
npm install smushers --save-dev
使用方法
安装成功后，让我们来看一下如何使用 smushers。
在项目目录中创建一个 smushers.json 文件，其中添加需要进行压缩的图片路径。例如：
{ "images": [ "images/*.jpg", "images/*.png", "images/**/*.jpg", "images/**/*.png" ] }
这样，所有 images/ 目录下的 jpg 和 png 图片将被压缩，包括子目录中的图片。
接着，我们可以在 package.json 文件中的 scripts 字段中添加以下代码：
"scripts": { "smushers": "smushers" }
现在，我们可以运行以下命令：
npm run smushers这将触发 smushers 压缩所有符合规定的图片。
配置选项
smushers 提供了以下配置选项：
images （必需）
需要进行压缩的图片路径。支持 glob 语法。
destination （可选）
压缩完毕后，图片将被写入此路径。默认为原始图片所在的路径。
verbose （可选）
是否打印详细信息。默认为 false。
dryRun （可选）
是否模拟运行smushers，不进行图片压缩，仅打印出将要打印的信息。默认为 false。
示例代码
下面是一个 smushers.json 的完整示例：
-- -------------------- ---- ------- - --------- - --------------- --------------- ------------------ ----------------- -- -------------- -------- ---------- ----- --------- ----- -展开代码
完整的 package.json 代码如下：
-- -------------------- ---- ------- - ------- ------------- ---------- -------- ---------- - ----------- ---------- -- ------------------ - ----------- -------- - -展开代码
现在，我们就可以愉快地使用 smushers 了！
总结
使用 smushers 可以大大优化你的项目中的图片，提高你的网站性能和用户体验。其使用简便，只需要一次安装便可自动运行，你还等什么呢，赶紧使用吧！
以上就是本文的全部内容，祝大家使用愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73480
