Плагин webp-css для Gulp.js позволяет автоматически генерировать CSS классы для изображений в формате webp. Это позволяет использовать webp изображения в браузерах, которые их поддерживают, сохраняя при этом обратную совместимость с браузерами, которые не поддерживают этот формат.
Чтобы настроить плагин webp-css в Gulp.js, вам понадобится:
1. Установить плагины зависимости. Откройте командную строку и перейдите в папку проекта, затем выполните следующую команду:
npm install gulp-webp-css --save-dev
Эта команда установит плагин gulp-webp-css и добавит его в список зависимостей вашего проекта.
2. Подключить плагин в файле Gulp.js. Откройте файл Gulp.js, который используется для настройки заданий Gulp, и импортируйте плагин:
const webpCSS = require('gulp-webp-css');
3. Создать задание для обработки изображений. В функции, где настраиваются задания Gulp, создайте новое задание для обработки изображений и применения плагина webp-css:
gulp.task('webp-css', function () {
return gulp.src('path/to/images/**/*.+(png|jpg|jpeg)')
.pipe(webpCSS())
.pipe(gulp.dest('path/to/destination'));
});
В этом примере указаны пути к изображениям и целевой папке назначения. Замените их на соответствующие пути в вашем проекте.
4. Запустите задание. Запустите задание, чтобы обработать изображения и сгенерировать CSS классы для webp:
gulp webp-css
После завершения задания, в целевой папке назначения появятся CSS файлы с готовыми классами для webp изображений.
Таким образом, настройка плагина webp-css в Gulp.js сводится к установке плагина, подключению его в файле Gulp.js, созданию задания для обработки изображений и запуску этого задания. Благодаря этому плагину вы сможете использовать webp изображения в проекте с минимальными усилиями.