npm 包 gulp-unimage 使用教程

简介

gulp-unimage 是一个用于压缩图片的 gulp 插件，它能够将项目中使用的图片进行压缩并生成相应的 WebP 格式，从而提高网页的加载速度。

安装

要使用 gulp-unimage，首先需安装 gulp 和 gulp-unimage。

在命令行中输入以下命令进行安装：

npm install gulp gulp-unimage --save-dev

使用方法

压缩图片

在 gulpfile.js 中定义以下任务：

const gulp = require('gulp');
const unimage = require('gulp-unimage');

gulp.task('unimage', () => {
  return gulp.src('./images/**/*.*')
    .pipe(unimage())
    .pipe(gulp.dest('./dist/images'));
});

这个任务会将 images 文件夹中的图片进行压缩，并输出到 dist/images 文件夹中。

生成 WebP 格式

在 gulpfile.js 中定义以下任务：

-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------------

------------------------- -- -- -
  ------ ---------------------------
    ---------------
      ----- ----
    ---
    ----------------------------------
---

这个任务会将 images 文件夹中的图片进行压缩，并生成相应的 WebP 格式图片，输出到 dist/images 文件夹中。

压缩指定格式的图片

在 gulpfile.js 中定义以下任务：

const gulp = require('gulp');
const unimage = require('gulp-unimage');

gulp.task('unimage-png', () => {
  return gulp.src('./images/**/*.png')
    .pipe(unimage())
    .pipe(gulp.dest('./dist/images'));
});

这个任务会将 images 文件夹中的 png 格式图片进行压缩，并输出到 dist/images 文件夹中。

参数说明

unimage

学习与指导意义

gulp-unimage 插件可以帮助前端开发人员快速地将网站图片进行压缩，从而提高网页的加载速度，减少用户等待时间，提高用户体验。同时，通过学习该插件的使用方法和参数说明，可以了解到压缩图片的常用方法和技巧，对于图片压缩和优化有一定帮助作用。

示例代码

在本地环境中创建一个名为 test 的文件夹，进入 test 文件夹后执行以下命令：

npm init -y
npm install gulp gulp-unimage --save-dev

在 test 文件夹下创建一个名为 gulpfile.js 的文件，输入以下示例代码：

-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------------

-------------------- -- -- -
  ------ ---------------------------
    ---------------
      -------- ---
      --------------- --
      ----- -----
      ------------ ---
      ----------------- --
    ---
    ----------------------------------
---

------------------------ -- -- -
  ------ -----------------------------
    ---------------
      -------- ----- --- ---- ----
      --------------- -
    ---
    ----------------------------------
---

------------------------- -- -- -
  ------ -----------------------------------
    ---------------
      ----- -----
      ------------- -----
      ----------------- --
    ---
    ----------------------------------
---

-------------------- ------------------------ -------------- -----------------

在 test 文件夹下创建一个名为 images 的文件夹，将一些图片放入该文件夹中。

在命令行中进入 test 文件夹后输入以下命令：

gulp

以上命令会执行 gulpfile.js 中定义的压缩任务，将 images 中的图片进行压缩，输出到 dist/images 中。

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