Как правильно подключить и оптимизировать изображения в Gulp?

Для того чтобы правильно подключить и оптимизировать изображения в Gulp, необходимо выполнить несколько шагов.

1. Установка необходимых пакетов:
Для работы с изображениями в Gulp необходимо установить следующие пакеты:
- gulp (основной пакет Gulp)
- gulp-imagemin (пакет для оптимизации изображений)
- gulp-changed (пакет для определения измененных файлов)
- gulp-cache (пакет для кеширования изображений)

Выполните команду в командной строке:

   npm install gulp gulp-imagemin gulp-changed gulp-cache --save-dev

2. Подключение пакетов в Gulpfile.js:
После установки необходимых пакетов, нам нужно подключить их в файле Gulpfile.js. Создайте файл Gulpfile.js, если его еще нет, и добавьте следующий код:

   const gulp = require("gulp");
   const imagemin = require("gulp-imagemin");
   const changed = require("gulp-changed");
   const cache = require("gulp-cache");

   const imgSrc = "src/images/**/*.+(png|jpg|jpeg|gif|svg)";
   const imgDest = "dist/images";

   // Таск для оптимизации изображений
   gulp.task("images", () =>
     gulp
       .src(imgSrc)
       .pipe(changed(imgDest))
       .pipe(
         cache(
           imagemin({
             interlaced: true,
           })
         )
       )
       .pipe(gulp.dest(imgDest))
   );

   // Таск для очистки кеша изображений
   gulp.task("clearCache", (done) => cache.clearAll(done));

   // Таск по умолчанию
   gulp.task("default", gulp.series("images", "clearCache"));

Здесь мы подключаем необходимые пакеты и создаем два таска:
- images выполняет оптимизацию изображений с использованием пакетов changed и cache. Входные изображения берутся из папки "src/images" и сохраняются в папку "dist/images".
- clearCache выполняет очистку кеша изображений.

3. Запуск тасков:
Для запуска тасков введите команду gulp в командной строке. Таск default будет выполняться по умолчанию, что приведет к оптимизации изображений и очистке кеша.

   gulp

Вы также можете запустить отдельные таски:

   gulp images

для оптимизации изображений, или

   gulp clearCache

для очистки кеша изображений.

Теперь вы знаете, как правильно подключить и оптимизировать изображения с помощью Gulp. Это поможет улучшить производительность вашего проекта и сэкономить место на сервере.