前言
在前端开发过程中，Gulp 是一个十分常用的自动化构建工具，其插件生态也非常丰富。本文要介绍的 gulp-sus，是一个 Gulp 插件，用于将图片压缩并转化为 webp 格式。该插件易于使用，且能够有效地提升前端性能。
安装 gulp-sus
在使用 gulp-sus 插件之前，需要先安装 Gulp 和 Node.js。如果已经安装完成，则可以在终端执行以下命令来全局安装 gulp-sus 插件：
--- ------- -------- --------
如果要在某个项目中使用 gulp-sus，也可以在项目目录下执行以下命令来进行安装：
--- ------- -------- ----------
使用 gulp-sus
引入 gulp-sus
在使用 gulp-sus 之前，需要先引入它。可以使用以下代码将 gulp-sus 引入项目：
--- ---- - ---------------- --- --- - --------------------
压缩图片并转化为 webp 格式
gulp-sus 主要功能是将图片压缩并转化为 webp 格式。以下是将 .jpg、.png、.gif 文件转化为 webp 和压缩的代码：
---------------- -------- -- -
------ -----------------------------------
------------
------------------------------
---如上所示，gulp.task 定义了一个名为 img 的任务。该任务调用 gulp.src 方法，指定源文件路径，使用 glob 语法选择指定的图片文件。接着使用 pipe 相关的方式和 gulp-sus 进行具体的操作。最后，将处理好的文件保存到 dist 目录下。
使用 options 传递参数
gulp-sus 将参数通过 options 参数进行传递。以下是一些可使用的参数：
- quality：指定压缩图片的质量，取值范围为0-100，默认值为75。
- webpQuality：指定转化为 webp 格式的图片质量，取值范围为0-100，默认值为75。
- lossless：指定是否使用无损压缩，取值范围为 true 或 false，默认为 false。
以上参数可以通过以下方式进行传递：
---------------- -------- -- -
------ -----------------------------------
-----------
-------- ---
------------ ---
--------- ----
---
------------------------------
---如上所示，在调用 sus 方法时，使用了一个参数对象，通过参数向 gulp-sus 传递了一些参数。
总结
本文主要介绍了 Gulp 插件 gulp-sus 的使用方法，通过使用 gulp-sus，能够有效地将图片压缩并转化为 webp 格式，从而提升前端性能。在使用时，可以通过 options 参数进行自定义设置，在使用中有任何问题，都可以去 Github 上查看各位大佬提出的 issues，进行解决。
参考文献
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/74684