Gulp-WebP — это плагин для Gulp.js, который позволяет автоматически конвертировать изображения в формат WebP. Этот плагин основан на библиотеке webp-converter, которая предоставляет возможность конвертировать изображения в формат WebP.
На самом деле, Gulp-WebP не является ответственным за работу с изображениями, которые уже обёрнуты в теге picture. Работа с тегом picture и его содержимым — это задача браузера, а не плагина Gulp-WebP. Поэтому сам по себе плагин не имеет никакого влияния на работу с изображениями, обёрнутыми в тег picture.
Тег picture был введен в HTML5 и предназначен для предоставления браузеру нескольких вариантов изображений с разными источникамис на разных условиях. Как правило, внутри тега picture содержится несколько элементов source с разными атрибутами srcset, а также элемент img, который используется, если ни один из элементов source не поддерживается браузером.
Если вы хотите использовать плагин Gulp-WebP для конвертирования изображений, которые уже обёрнуты в тег picture, в формат WebP, вам следует изменить ваш результат работы, направленный в тег picture. Например, вы можете создать новый исходный файл с изображением в формате WebP и использовать его в варианте внутри тега picture.
Для того чтобы автоматизировать этот процесс, вы можете использовать плагин Gulp-Replace, который позволяет автоматически заменять фрагменты в файлах на другие фрагменты. Вы можете создать задачу в Gulp, которая найдет ваши теги picture в файлах, заменит существующие изображения на изображения в формате WebP и сохранит изменения в новом файле.
Пример кода для Gulp-Replace (вам также потребуется установить плагин gulp-replace):
const gulp = require('gulp');
const replace = require('gulp-replace');
gulp.task('replace', function() {
return gulp.src('src/*.html')
.pipe(replace(/<source[sS]*?</source>/g, '<source srcset="path/to/webp/image.webp" type="image/webp"></source>'))
.pipe(gulp.dest('dist/'));
});
gulp.task('default', gulp.series('replace'));
В этом примере мы используем Gulp-Replace для замены всех тегов source на новый тег source с изображением в формате WebP и сохраняем измененный файл в папку dist.
Таким образом, вы можете использовать плагин Gulp-Replace в сочетании с Gulp-WebP, чтобы автоматически заменять изображения в формате WebP в ваших тегах picture.