npm 包 gulp-sus 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，Gulp 是一个十分常用的自动化构建工具，其插件生态也非常丰富。本文要介绍的 gulp-sus，是一个 Gulp 插件，用于将图片压缩并转化为 webp 格式。该插件易于使用，且能够有效地提升前端性能。

安装 gulp-sus

在使用 gulp-sus 插件之前，需要先安装 Gulp 和 Node.js。如果已经安装完成，则可以在终端执行以下命令来全局安装 gulp-sus 插件：

npm install --global gulp-sus

如果要在某个项目中使用 gulp-sus，也可以在项目目录下执行以下命令来进行安装：

npm install gulp-sus --save-dev

使用 gulp-sus

引入 gulp-sus

在使用 gulp-sus 之前，需要先引入它。可以使用以下代码将 gulp-sus 引入项目：

var gulp = require('gulp');
var sus = require('gulp-sus');

压缩图片并转化为 webp 格式

gulp-sus 主要功能是将图片压缩并转化为 webp 格式。以下是将 .jpg、.png、.gif 文件转化为 webp 和压缩的代码：

gulp.task('img', function () {
  return gulp.src('src/img/*.{jpg,png,gif}')
    .pipe(sus())
    .pipe(gulp.dest('dist/img/'));
});

如上所示，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，进行解决。

参考文献

gulp-sus Github

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/74684