Как обрабатывать изображения в webp формат в gulp + pug?

Для обработки изображений в формате WebP в Gulp с использованием Pug, вам понадобится несколько пакетов и настроек. Ниже представлен подробный шаг за шагом процесс.

1. Убедитесь, что у вас установлен Node.js и Gulp.js.
2. Создайте новую директорию для проекта и инициализируйте его с помощью команды npm init.
3. Установите необходимые пакеты, включая gulp, gulp-pug, gulp-imagemin и gulp-webp. Вы можете установить их, выполнив команду npm install gulp gulp-pug gulp-imagemin gulp-webp --save-dev.

   npm install gulp gulp-pug gulp-imagemin gulp-webp --save-dev

4. Создайте файл gulpfile.js в корневой директории вашего проекта и добавьте следующий код:

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

   gulp.task('pug', () => {
     return gulp.src('src/**/*.pug')  // путь к вашим файлам pug
       .pipe(pug())
       .pipe(gulp.dest('dist'));  // путь для сохранения скомпилированных файлов
   });

   gulp.task('images', () => {
     return gulp.src('src/images/**/*.{jpg,png}')
       .pipe(imagemin())
       .pipe(gulp.dest('dist/images'));
   });

   gulp.task('webp', () => {
     return gulp.src('dist/images/**/*.{jpg,png}')
       .pipe(webp())
       .pipe(gulp.dest('dist/images'));
   });

   gulp.task('default', gulp.series(['pug', 'images', 'webp']));

5. Создайте папку src в вашем проекте и добавьте в нее папку images, в которой будут храниться ваши исходные изображения в форматах JPG и PNG.
6. Создайте папку dist в вашем проекте, которая будет содержать скомпилированный HTML код и оптимизированные изображения.
7. Создайте файлы Pug в директории src для создания HTML-разметки. Например, создайте файл index.pug с простым содержимым:

   doctype html
   html
     head
       title My Website
     body
       img(src="images/example.jpg", alt="Example Image")

8. Запустите Gulp, выполнив команду gulp в командной строке. Gulp выполнит задачи по сборке Pug-шаблонов, оптимизации изображений и преобразованию их в формат WebP.
9. Проверьте, что в директории dist/images появились оптимизированные изображения в формате WebP.
10. Откройте файл dist/index.html в вашем браузере и убедитесь, что изображение отображается верно.

Это основная конфигурация для обработки изображений в формате WebP с использованием Gulp и Pug. Вы можете настроить пути и любую дополнительную обработку изображений в соответствии с вашими потребностями.