gulp 的使用(五):处理图片

1,258 阅读3分钟

这是我参与更文挑战的第18天,活动详情查看: 更文挑战

前言

在上一篇 gulp 的使用(四):处理 css 文章里介绍了 gulp 如何处理 css。

在这篇文章里将介绍如何去处理图片。

输出图片

在上几篇文章里已经介绍过好几遍如何使用 src、dest、pipe 方法输出文件,在这里不再详细复述,只简单说明和贴出代码。

在 src 目录创建 assets 目录,assets 目录里面创建 img 目录,里面存放一种图片 simao.jpg。

gulpfile.js 配置

function img() {
  return src(['src/assets/img/**/*.{png,jpg,gif,jpeg,ico}']) //后缀都用小写,不然不识别
    .pipe(dest('dist/assets/img'))
}

function watcher() {
  ...
  watch('src/assets/img/**/*.{png,jpg,gif,jpeg,ico}', series(img)).on('unlink', function (path) {
    del('dist/assets/img/**/' + Path.basename(path))
  })
}

exports.default = series(clean, html, libJs, js, css, scss, libCss, img, devServer, watcher)
exports.build = series(clean, html, libJs, js, css, scss, libCss, img)

压缩图片

gulp-imagemin 是一个压缩图片的插件,下面介绍如何使用 gulp-imagemin。

安装

npm i -D gulp-imagemin

在 gulpfile.js 配置

const imagemin = require('gulp-imagemin')

...

function img() {
  return src(['src/assets/img/**/*.{png,jpg,gif,jpeg,ico}']) //后缀都用小写,不然不识别
    .pipe(imagemin({
      optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
      progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
      interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
      multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
    }))
    .pipe(dest('dist/assets/img'))
}

运行 npm run build,可以发现终端打印了压缩图片信息。

image.png

注意:上面这种写法是 gulp-imagemin 7.x 版本的写法,最新的 8.x 版本写法已经大改了,这里就不做详细介绍了,具体看 imagemin/imagemin: [Unmaintained] Minify images seamlessly (github.com)

优化构建图片过程

如果我们每次构建时都去压缩所有图片,这样会产生很大的性能开销,因此我们只需要压缩那些修改过的图片。

听起来,不是用我们之前文章的 gulp-changed 插件吗?

嗯......并不是,其实我也不太清楚为什么没有使用 gulp-changed,网上的码农在处理图片这方面没有用到 gulp-changed,而是使用 gulp-cache。

github 里面有人提问过这两者的关系:gulp-changed vs gulp-cache,大致意思是,gulp-changed 是只允许修改过的文件通过,gulp-cache 是所有文件都会通过?(可能是指所有文件会通过管道,但是部分文件是从缓存中直接取得,不需要额外处理,因此起到优化作用)

在这篇文章也是用 gulp-cache 来优化构建图片过程。

安装

npm i -D gulp-cache

gulpfile.js

const cache = require('gulp-cache')

...

function img() {
  return src(['src/assets/img/**/*.{png,jpg,gif,jpeg,ico}']) //后缀都用小写,不然不识别
    .pipe(
      cache(
        imagemin({
          optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
          progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
          interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
          multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
        })
      )
    )
    .pipe(dest('dist/assets/img'))
}

完整项目

2021.8.30,我重新整理了一遍项目,已放到 gitee 上,大家可以 clone 下来直接用,代码的提交记录顺序和我这个系列文章教程顺序是一致的,大家看到哪一篇文章时,就回滚代码到哪一个版本,这样看项目代码会更直观。

gitee 库链接:gitee.com/only1zhuo/g…

image.png

“gulp 的使用”系列文章