Генерация и оптимизация Webp с помощью Gulp

Я использую веб-приложение-генератор, которое включает imagemin. Я также добавил imagemin-webp и gulp-webp в мою сборку.

Я не знаю, как реализовать. Я хочу сохранить исходные изображения jpg и png в дополнение к добавлению webp, и чтобы все эти изображения были оптимизированы при выполнении задачи 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.


optimization gulp webp yeoman-generator
person scottrod    schedule 24.09.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны включить gulp-clone для вывода исходных файлов с их аналогами в 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'));
});
person Morgan    schedule 08.12.2017
comment
Привет @Morgan, прошло много времени с тех пор, как это комментировали, но этот процесс у меня работает очень хорошо, когда я запускаю gulp, но когда моя функция часов улавливает новые изображения, я получаю эту ошибку (node:16040) UnhandledPromiseRejectionWarning: Error: write after end. Это происходит только на часах, когда я запускаю процесс, все сгенерировано правильно. - person Mihail Minkov; 27.06.2019

arrow_upward
0
arrow_downward

Это мой вариант в 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 = () => {
  return src(['./src/img/**/*.jpg', './src/img/**/*.png'], {base: 'src'})
    .pipe(imagemin([
      webp({
        quality: 60,
      })
    ]))
    .pipe(extReplace('.webp'))
    .pipe(dest('./app/'))
}

watch(['./src/img/**/*.jpg', './src/img/**/*.png'], exportWebP);
exports.default = series(parallel(exportWebP));

person Denis    schedule 10.02.2021