Gulp-image-resize: как его правильно настроить?

Для настройки плагина Gulp-image-resize вам понадобится следующая информация: путь к исходным изображениям, путь для сохранения измененных изображений, размеры измененных изображений (ширина и высота) и другие опции, такие как качество изображения. Ниже приведены шаги, которые помогут вам правильно настроить этот плагин.

Шаг 1: Установка плагина
Прежде всего, убедитесь, что у вас установлен Node.js и npm (пакетный менеджер Node.js). Затем создайте новый проект и установите Gulp и плагин gulp-image-resize следующей командой в терминале:

npm install gulp gulp-image-resize --save-dev

Шаг 2: Подключение плагина
В вашем файле Gulpfile.js импортируйте плагин gulp-image-resize:

const gulp = require('gulp');
const imageResize = require('gulp-image-resize');

Шаг 3: Настройка задачи
Создайте задачу в Gulpfile.js, в которой будет описано, какие изображения и как требуется изменить:

gulp.task('resize', function () {
  return gulp.src('src/images/*.jpg') // указываем путь к исходным изображениям, можно использовать группу файлов (например: *.jpg)
    .pipe(imageResize({
      width: 200, // ширина измененного изображения
      height: 200, // высота измененного изображения
      crop: true, // если требуется обрезать изображение до указанных размеров
      upscale: false, // если требуется изменять размер только уменьшением, а не увеличением
      quality: 0.5 // качество измененного изображения (от 0 до 1)
    }))
    .pipe(gulp.dest('dist/images')); // указываем путь для сохранения измененных изображений
});

Шаг 4: Запуск задачи
Запустите задачу с помощью команды gulp в терминале:

gulp resize

После выполнения этой команды плагин Gulp-image-resize обработает все изображения в указанной папке src/images и создаст измененные изображения с заданными размерами и качеством в папке dist/images.

Вы можете настроить плагин Gulp-image-resize по своим потребностям, включая изменение размеров в соответствии с вашими требованиями, изменение качества, использование других форматов изображений и так далее. Для получения дополнительной информации вы можете посетить страницу плагина на GitHub или официальную документацию Gulp.