legao-plugin-imagemin 是一个使用 Node.js 开发的 npm 包，用于压缩图片。它基于 imagemin 和 gulp，可以帮助前端工程师更好地优化图片，从而缩短加载时间、提高用户体验。本文主要介绍该 npm 包的使用教程。
安装
legao-plugin-imagemin 是一个 npm 包，使用前需要先安装。打开终端（或命令行界面），进入项目目录，输入以下命令：
npm install --save-dev legao-plugin-imagemin
这个命令会在项目中安装 legao-plugin-imagemin 并添加到 package.json 的 devDependencies 中。
配置
安装完成后，需要在项目中配置 legao-plugin-imagemin。
- 在项目根目录下，创建一个名为 gulpfile.js 的文件。
- 将以下代码粘贴到 gulpfile.js 中：
const gulp = require('gulp');
const legaoImagemin = require('legao-plugin-imagemin');
gulp.task('imagemin', () =>
gulp.src('src/images/*')
.pipe(legaoImagemin())
.pipe(gulp.dest('dist/images'))
);代码解释：
- 第一行引入了 gulp，这是一个流程自动化工具。
- 第二行引入了 legao-plugin-imagemin，这是一个 npm 包，用于压缩图片。
- 第四行定义了一个任务名为 imagemin，用于执行图片压缩任务。
- 第五行从源目录 src/images 中读取原始图片文件。
- 第六行通过管道运算符（pipe）将图片文件输入到 legao-plugin-imagemin 中并进行压缩。
- 第七行将压缩后的图片文件输出到目标目录 dist/images 中。
使用
配置完成后，即可使用 legao-plugin-imagemin。
在终端中输入以下命令：
gulp imagemin
这个命令会执行 gulpfile.js 文件中的 imagemin 任务，将源目录 src/images 中的图片文件进行压缩，然后输出到目标目录 dist/images 中。
示例
假设我们有一张原始图片文件 photo.jpg，大小为 5MB。我们希望将它进行压缩以提升网站的加载速度。
- 首先，在项目根目录下创建以下文件夹结构：
├── dist │ ├── images ├── src │ ├── images │ │ ├── photo.jpg └── gulpfile.js
- 然后，在 gulpfile.js 中定义 imagemin 任务，如下图所示：
const gulp = require('gulp');
const legaoImagemin = require('legao-plugin-imagemin');
gulp.task('imagemin', () =>
gulp.src('src/images/*')
.pipe(legaoImagemin())
.pipe(gulp.dest('dist/images'))
);- 最后，在终端中输入以下命令：
gulp imagemin
这个命令会将源目录 src/images 中的图片文件进行压缩，然后输出到目标目录 dist/images 中。我们可以通过以下命令查看压缩后的图片大小：
ls -lh dist/images
假设压缩后的图片文件名为 photo-min.jpg，大小为 1MB，那么我们成功将图片大小从 5MB 缩小到 1MB，提升了网站的加载速度，提高了用户体验。
结语
通过本文，你已经学会了如何配置和使用 npm 包 legao-plugin-imagemin。了解和掌握它，可以帮助我们更好地优化图片，在提高用户体验的同时，提高网站的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559a781e8991b448d739e