Gulp-imagemin - оптимизация изображений в Gulp

Крайне необходимая задача, возникающая в работе каждого верстальщика - это оптимизация графики, нарезанной из psd-макета или используемой в HTML-шаблоне.

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

Таким плагином является gulp-imagemin. Он умеет сжимать картинки форматов PNG, JPEG, GIF и SVG. Все остальные (не поддерживаемые) форматы графических файлов просто игнорируются плагином

1

gulp-imagemin

Установка gulp-imagemin

Установка плагина

1

gulp-imagemin

1

npm install

1

--save-dev

$ sudo npm install --save-dev gulp-imagemin

Создание задачи под gulp-imagemin

После установки плагина

1

gulp-imagemin

1

imagemin

1

gulp-imagemin

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

А затем создаем задачу с произвольным именем

1

compress

// Compress Task

gulp.task('compress', function() {
  gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('build/images'))
});

Задачу

1

compress

1

gulp.watch

Создаю в проекте

1

gulp_test

1

images

1

.jpg

$ ls images/
black (22).jpg  black (23).jpg  black (28).jpg  black (31).jpg  black (36).jpg  black (41).jpg

Цель - проверить, действительно ли происходит сжатие графических файлов. Давайте опробуем работу плагина

1

gulp-imagemin

1

gulp compress

$ gulp compress
Using gulpfile ~/Projects/gulp_test/gulpfile.js
Starting 'compress'...
Finished 'compress' after 8.56 ms
gulp-imagemin: Minified 6 images (saved 83.02 kB - 7.2%)

Отлично! Задача

1

compress

1

7.2%

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

1

images

… запомним примерные размеры каждого из файлов. А затем взглянем на содержимое директории

1

build/images/

1

gulp-imagemin

Видно при сравнении, что размер графических файлов, пускай и ненамного, но уменьшился.

Gulp-imagemin - автоматический мониторинг

Давайте доведем нашу задачу до логического завершения и настроим Gulp таким образом, чтобы он автоматически отслеживал добавление в директории

1

images

И как только они появляются там, то немедлено производил бы их сжатие при помощи плагина

1

gulp-imagemin

Для этого создам задачу мониторинга

1

watch

// Watch Task

gulp.task('watch', function() {
  gulp.watch('images/*', ['compress']);
});

… которую добавлю в очередь на выполнение для дефолтной задачи

1

default

// Default Task

gulp.task('default', ['watch']);

Полностью листниг файла

1

gulpfile.js

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

// Default Task
gulp.task('default', ['watch']);

// Watch Task
gulp.task('watch', function() {
  gulp.watch('images/*', ['compress']);
});

// Compress Task
gulp.task('compress', function() {
  gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('build/images'));
});

Запускаю в консоли команду

1

gulp

1

images

Видим, что каждый раз, как в директорию

1

images

1

compress

$ gulp
  Using gulpfile ~/Projects/gulp_test/gulpfile.js
  Starting 'watch'...
  Finished 'watch' after 8.42 ms
  Starting 'default'...
  Finished 'default' after 12 μs
  Starting 'compress'...
  Finished 'compress' after 13 ms
  gulp-imagemin: Minified 7 images (saved 93.43 kB - 7.7%)
  Starting 'compress'...
  Finished 'compress' after 2.13 ms
  gulp-imagemin: Minified 8 images (saved 103.77 kB - 8%)

На выполнение первой задачи ушло 7 миллисекунд:

gulp-imagemin: Minified 7 images (saved 93.43 kB - 7.7%)

… на вторую задачу - 2.13 миллисекунд:

gulp-imagemin: Minified 8 images (saved 103.77 kB - 8%)

При этом я “выиграл”

1

7.7%

1

8%

Усложним задачу для gulp-imagemin

Можно немного усложнить и усовершенствовать процесс оптимизации изображений. Для этого немного перепишу задачу

1

compress

// Compress Task
  gulp.task('compress', function() {
    gulp.src('images/*')
    .pipe(imagemin({
      progressive: true
    }))
    .pipe(gulp.dest('images/'));
  });

Первое изменение - это добавлена опция

1

progressive: true

1

gulp-imagemin

Второе изменение - изменена директория назначения. Теперь директория-источник изображений

1

gulp.src('images/*')

1

gulp.dest('images/')

Таким образом, достаточно положить в директорию

1

images

На этом все.