Optimization 通过Gulp生成和优化Webp

我使用的是包含imagemin的。我还将和添加到我的构建中

我不确定如何实施。除了添加webp之外，我还想保留原始jpg和png图像，并在运行

gulp build

任务时对所有这些图像进行优化

我对这件事感到困惑

如何根据当前设置实施此功能：

const webp = require('gulp-webp');
const imageminWebp = require('imagemin-webp');

gulp.task('images', () => {
    return gulp.src('app/images/**/*')
    .pipe(webp())
    .pipe($.cache($.imagemin()))
    .pipe(gulp.dest('dist/images'));
});

目前，这只会生成未优化的webp文件，不会打包任何原始jpg和png文件。

您必须包含这些文件才能将原始文件与其webp对应文件一起输出。它看起来像这样：

const webp = require('gulp-webp');
const imageminWebp = require('imagemin-webp');
const clone = require('gulp-clone');
const clonesink = clone.sink();

gulp.task('images', () => {
    return gulp
        .src('app/images/**/*')
        .pipe($.cache($.imagemin())) // optimize images before converting
        .pipe(clonesink) // start stream
        .pipe(webp()) // convert images to webp and save a copy of the original format
        .pipe(clonesink.tap()) // close stream and send both formats to dist
        .pipe(gulp.dest('dist/images'));
});

您必须包括输出原始文件及其webp副本。它看起来像这样：

const webp = require('gulp-webp');
const imageminWebp = require('imagemin-webp');
const clone = require('gulp-clone');
const clonesink = clone.sink();

gulp.task('images', () => {
    return gulp
        .src('app/images/**/*')
        .pipe($.cache($.imagemin())) // optimize images before converting
        .pipe(clonesink) // start stream
        .pipe(webp()) // convert images to webp and save a copy of the original format
        .pipe(clonesink.tap()) // close stream and send both formats to dist
        .pipe(gulp.dest('dist/images'));
});

---

这是我在2021年的选择。如果你有什么问题，就问我

const{src，dest，parallel，series，watch}=require（'gulp'）；
const imagemin=require（'gulp-imagemin'）；
const webp=require（'imagemin-webp'）；
const extReplace=require（'gulp-ext-replace'）；
const exportWebP=（）=>{
返回src（['./src/img/***.jpg'，'./src/img/***.png']，{base:'src'}）
.管道（最小值）([
webp({
质量：60，
})
]))
.pipe（extReplace（'.webp'））
.pipe（dest（'./app/'））
}
手表（['./src/img/***.jpg'，'./src/img/***.png']，exportWebP）；
exports.default=串联（并联（exportWebP））这是我在2021年的选择。如果你有什么问题，就问我


const{src，dest，parallel，series，watch}=require（'gulp'）；
const imagemin=require（'gulp-imagemin'）；
const webp=require（'imagemin-webp'）；
const extReplace=require（'gulp-ext-replace'）；
const exportWebP=（）=>{
返回src（['./src/img/***.jpg'，'./src/img/***.png']，{base:'src'}）
.管道（最小值）([
webp({
质量：60，
})
]))
.pipe（extReplace（'.webp'））
.pipe（dest（'./app/'））
}
手表（['./src/img/***.jpg'，'./src/img/***.png']，exportWebP）；
exports.default=串联（并联（exportWebP））
Hello@Morgan，这已经很久没有被评论了，但是当我开始吞咽时，这个过程对我来说非常好，但是当我的watch函数捕捉到新图像时，我得到了这个错误
（节点：16040）未处理的PromisejectionWarning:错误：结束后写入
。这只发生在watch上，当我启动该过程时，所有内容都正确生成。Hello@Morgan，这已经有很长一段时间没有被评论了，但是当我启动gulp时，该过程对我来说非常好，但是当我的watch函数捕捉到新图像时，我会收到此错误
（节点：16040）未处理的PromisejectionWarning:错误：结束后写入
。它只发生在手表上，当我开始的过程中，一切都是正确生成的。