Минификация CSS с Gulp

Сборщик Gulp помогает автоматизировать различные рутинные задачи, в т.ч. сжатие CSS-файлов. Существует несколько популярных плагинов решающих эту задачу. Их мы и рассмотрит в этой статье — краткий обзор, инструкцию по подключению, и сравнительная характеристика.

1. CSSO

Заслуженный плагин, хорошо минифицирует файлы и имеет поддержку sourcemaps, до сих пор пользуетя большой популярностью.

Особенности

  • встроенная поддержка sourcemaps

Подключение

Сначала необходимо установить сам плагин gulp-csso
 

Подключить его в Gulp:

И добавить в таск:

В таком виде это такск минифицирует все css-файлы из директории app/css и перемещает их в dist/css, без реструктуризации и выводя в консоль инфу об обработанных файлах.

Настройки

restructure: [true | false]— реструктуризация кода — собирает правила с одинковыми стилями в один селектор.

sourceMap: [true | false] — создает карту файла.

debug: [true | false | int] — дебаг, выводит в консоль подробности о выполненных процессах. Положительные числа для степени подробности.

usage: — тонкие дополнительные настройки алгоритма сжатия. Подробнее в документации

2. gulp-clean-css

Самый популярный и часто загружаемый пакет для минификации. Сжимает чуть меньше  чем предыдущий.
Умеет немного больше: удаляет единицы измерения, когда в них нет необходимости, конвертировать значения цветов в короткую запись, удаляет дубликаты, реструктуризирует.

Особенности

  • надежный — не ломает стили
  • форматирование кода
  • гибкие настройки алгоритмов оптимизации

Подключение

Установка пакета gulp-clean-css:

Подключение плагина в галпфайле:

Таск :

Этот таск также просто минифицирует файлы и переносит в дистрибутив.

Настройки

Настроек много (документация), приведем самые востребованные:

compatibility — совместимость с браузерами, для старых сжимает чуть меньше.

format — форматировние кода, делает код красивым, если не используем форматтер отдельно.

level — уровень, степень оптимизации.

rebase — делает ребейз в путях (url-ах).

3. gulp-cssnano

Самый мощный и актуальный на сегоднящний день инструмент для минификации css-файлов.

Особенности

  • посторен на экосистеме PostCSS

Подлючение

Установим пакет:

Подключим:

Таск:

Настройки

preset — параметр для настроек

Яндекс.Метрика