在前端开发中，我们经常会需要使用一些辅助工具来提高我们的开发效率，如今，npm 已经成为了前端开发中使用最广泛的一个包管理工具。而在这里，我们将会介绍一款名叫 shi-fu-mini 的 npm 包，它可以帮助我们实现图片压缩，自动化图片转 webp 等功能。
什么是 shi-fu-mini
shi-fu-mini 是一个基于 Jimp 和 imagemin 的 npm 包，它可以自动化压缩图片，并且支持将图片转化为 webp 格式。它具有以下特点：
- 自动化：只需要设置好需要压缩和转化的文件夹路径，其他工作都交由 shi-fu-mini 来完成。
- 多种压缩方式：shi-fu-mini 支持多种图片压缩方式，可以根据不同的需求来进行设置。
- 支持 webp：shi-fu-mini 可以将图像自动转换为 webp 格式，帮助我们更好地优化我们的图片。
- 精度高：使用 shi-fu-mini 压缩出来的图片质量较高，同时大小也会有明显的减少。
如何安装和使用 shi-fu-mini
使用 shi-fu-mini 之前，我们需要先通过 npm 来进行安装。打开终端，输入以下命令：
--- ------- ----------- ----------
安装完成后，我们就可以开始使用 shi-fu-mini 来压缩和转换图片了。
设置图片压缩和 webp 转化
首先，我们需要在项目中引入 shi-fu-mini：
----- ----- - ----------------------
接着，我们可以使用 shifu() 方法来进行图片压缩和 webp 转换的设置。
------- ----- ---------- -- --------- --- ----------- -- -------- ----- ----- -- ------- -------- -- -- ---- --
在上述代码中，我们设置了需要压缩的文件夹路径为 "src/img"，压缩后的文件夹路径为 "dist/img"，并且将图片自动转换为 webp 格式，并设置了压缩质量为 80。
多种压缩方式
shi-fu-mini 支持多种压缩方式，可以根据不同需求来进行设置。目前支持以下几种压缩方式:
jimp: 使用 Jimp 进行基本压缩，该方式并不支持 webp 格式转化。imagemin: 使用 imagemin 进行图片压缩，该方式支持压缩 webp 格式。both: 同时采用 jimp 和 imagemin 进行图片压缩，该方式同时也支持压缩 webp 格式。
我们可以通过设置 mode 参数来指定以上压缩方式。例如：
------- ----- ---------- --- ----------- ----- ------- -------- -- --
在上述代码中，我们使用 both 方式来进行图片压缩，并设置了压缩质量为 80。
示例代码
----- ----- - ---------------------- ------- ----- ---------- --- ----------- ----- ------- ----- ----- -------- -- --
在上述示例代码中，我们要求将 "src/img" 中的所有图片，压缩后存储到 "dist/img"，同时将所有的压缩图片转换为 webp 格式，并设置压缩质量为 80。
总结
shi-fu-mini 是一个非常实用的 npm 包，可以帮助我们自动化地压缩图片，同时还支持将图片转换为 webp 格式，对于我们的前端开发都有非常大的帮助。希望本文能够对大家有所帮助，同时也希望大家在后续的开发工作中能够充分发挥 shi-fu-mini 的优势，提高我们的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005785d81e8991b448eaf18