Крайне необходимая задача, возникающая в работе каждого верстальщика - это оптимизация графики, нарезанной из 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
можно запускать однократно вручную или автоматически, доверив это дело Gulp и поместив ее внутрь встроенной функции
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
запустилась и выполнилась за 8.56 миллисекунд. При этом было обработано 6 изображений, над которыми была произведена операция сжатия. Экономия размера в результате компресии составила
1
7.2%
.

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

1
images
:

Оригинальные изображения в проекте

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

1
build/images/
, в которой располагаются сжатые плагином
1
gulp-imagemin
изображения:

Обработанные плагином 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
был добавлен файл, Gulp запускал задачу
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 продолжает работать, находясь в фоновом режиме.

Усложним задачу для 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
какое-либо изображение и оно тут же преобразуется в точно такое же изображение, но меньшего размера! Удобно, не правда ли?

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017