简介
gulp-unimage 是一个用于压缩图片的 gulp 插件，它能够将项目中使用的图片进行压缩并生成相应的 WebP 格式，从而提高网页的加载速度。
安装
要使用 gulp-unimage，首先需安装 gulp 和 gulp-unimage。
在命令行中输入以下命令进行安装：
--- ------- ---- ------------ ----------
使用方法
压缩图片
在 gulpfile.js 中定义以下任务：
----- ---- - ----------------
----- ------- - ------------------------
-------------------- -- -- -
------ ---------------------------
----------------
----------------------------------
---这个任务会将 images 文件夹中的图片进行压缩，并输出到 dist/images 文件夹中。
生成 WebP 格式
在 gulpfile.js 中定义以下任务：
----- ---- - ----------------
----- ------- - ------------------------
------------------------- -- -- -
------ ---------------------------
---------------
----- ----
---
----------------------------------
---这个任务会将 images 文件夹中的图片进行压缩，并生成相应的 WebP 格式图片，输出到 dist/images 文件夹中。
压缩指定格式的图片
在 gulpfile.js 中定义以下任务：
----- ---- - ----------------
----- ------- - ------------------------
------------------------ -- -- -
------ -----------------------------
----------------
----------------------------------
---这个任务会将 images 文件夹中的 png 格式图片进行压缩，并输出到 dist/images 文件夹中。
参数说明
unimage
| 参数名 | 类型 | 描述 |
|---|---|---|
| quality | number or Object | 图片压缩质量，默认值为 80。 |
| maxConcurrency | number | 最大并发数，默认值为 os.cpus().length - 1。 |
| webp | boolean | 是否使用 WebP 格式，默认值为 false。 |
| webpQuality | number | WebP 压缩质量，默认值为 75。 |
| webpMaxQuality | number | WebP 压缩最大质量，默认值为 100。 |
| webpMinQuality | number | WebP 压缩最小质量，默认值为 0。 |
| webpLossless | boolean | 是否启用 WebP 无损模式，默认值为 false。 |
| webpNearLossless | boolean | 是否启用 WebP 接近无损模式，默认值为 false。 |
| webpAlphaQuality | number | WebP 压缩透明 png 图片时的质量，默认值为 100。 |
| webpAlphaMaxQuality | number | WebP 压缩透明 png 图片时的最大质量，默认值为 100。 |
| webpAlphaMinQuality | number | WebP 压缩透明 png 图片时的最小质量，默认值为 0。 |
| webpAlphaMethod | number | WebP 压缩透明 png 图片时的压缩方法，默认值为 0。 |
学习与指导意义
gulp-unimage 插件可以帮助前端开发人员快速地将网站图片进行压缩，从而提高网页的加载速度，减少用户等待时间，提高用户体验。同时，通过学习该插件的使用方法和参数说明，可以了解到压缩图片的常用方法和技巧，对于图片压缩和优化有一定帮助作用。
示例代码
在本地环境中创建一个名为 test 的文件夹，进入 test 文件夹后执行以下命令：
--- ---- -- --- ------- ---- ------------ ----------
在 test 文件夹下创建一个名为 gulpfile.js 的文件，输入以下示例代码：
----- ---- - ----------------
----- ------- - ------------------------
-------------------- -- -- -
------ ---------------------------
---------------
-------- ---
--------------- --
----- -----
------------ ---
----------------- --
---
----------------------------------
---
------------------------ -- -- -
------ -----------------------------
---------------
-------- ----- --- ---- ----
--------------- -
---
----------------------------------
---
------------------------- -- -- -
------ -----------------------------------
---------------
----- -----
------------- -----
----------------- --
---
----------------------------------
---
-------------------- ------------------------ -------------- -----------------在 test 文件夹下创建一个名为 images 的文件夹，将一些图片放入该文件夹中。
在命令行中进入 test 文件夹后输入以下命令：
----
以上命令会执行 gulpfile.js 中定义的压缩任务，将 images 中的图片进行压缩，输出到 dist/images 中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005591e81e8991b448d6913