Gulp — Оптимизация изображений

В этой главе вы узнаете, как оптимизировать изображения. Оптимизация уменьшит размер изображений и поможет ускорить загрузку.

Установите плагины для оптимизации изображений

Перейдите в каталог «work» из командной строки и установите плагины «gulp-change» и «gulp-imagemin», используя следующие команды.

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

Объявите зависимости и создайте задачи

В файле конфигурации gulpfile.js сначала объявите зависимости, как показано в следующей команде.

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

Далее необходимо создать задачи для оптимизации изображений, как показано в следующем коде.

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

Задача imagemin будет принимать изображения png, jpg и gif из папки src / images / и минимизировать их перед записью в место назначения. Измененный () гарантирует, что только новые файлы передаются в каждый раз для минимизации. Плагин gulp- change будет обрабатывать только новые файлы и, следовательно, использовать драгоценное время.

Выполнить задачи

Файл конфигурации настроен и готов к выполнению. Используйте следующую команду для запуска задачи.

gulp

Запустив задачу с помощью приведенной выше команды, вы получите следующий результат в командной строке.