这是我参与更文挑战的第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
,可以发现终端打印了压缩图片信息。
注意:上面这种写法是 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…