Минификация CSS с помощью CSS Optimizer

Минификация CSS с помощью CSS Optimizer

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

В контексте CSS минификация означает простое удаление лишних символов. Для примера давайте разберем кусок кода:

Этот код вместе с символом перевода на новую строку и пробелами весит 98 байт. А теперь давайте взглянем на минифицированную версию:

Теперь наш CSS весит 80 байт – 18% выгоды. Чем меньше байт, тем быстрее загрузка файлов, а также больше экономия при передаче данных для вас и пользователей.

В этом разделе мы познакомимся с CSS Optimizer или CSSO – инструмент минификации, работающий на Node.js. Перед установкой CSSO необходимо установить Node.js и NPM. NPM входит в установку Node.js, т.е. нужно установить всего лишь один пакет.

Для работы с CSSO необходимо уметь работать в командной строке. Пользователи Linux и OS X могут воспользоваться терминалом (приложения > Terminal.app на OS X). На Windows используйте командную строку. Откройте пуск или нажмите на клавишу Windows и наберите cmd в поиске.

Установка CSSO

После установки Node.js и NPM можно перейти к установке CSSO. В командной строке необходимо набрать:

Флаг –g устанавливает CSSO глобально, чтобы потом можно было запускать инструмент из командной строки. Пользователям Linux и OS X, возможно, понадобится установить sudo (sudo npm install -g csso). Вы поймете, что sudo установился, когда NPM распечатает установочный путь в окне командной строки, и снова отобразится командная строка, как показано на Рисунке.

Минификация CSS с помощью CSS Optimizer

Минификация с помощью CSSO

Для минификации CSS-файлов запустите команду csso, передав имя файла в качестве аргумента: csso style.css

Будет выполнено базовое сжатие. CSSO удаляет ненужные проблелы, лишние точки с запятой и комментарии из файла.

По завершению CSSO распечатает оптимизированный код в стандартный вывод (текущий терминал или окно командной строки). Однако в большинстве случаев нам нужно сохранить выходные данные в файл. Для этого необходимо передать второй аргумент в csso – имя минифицированного файла. Например, для сохранения style.css в минифицированный файл style.min.css необходимо выполнить следующую команду:

По умолчанию CSSO изменит части вашего CSS. Например, он объединит блоки объявлений с дублирующими селекторами и удалит свойства, которые переписывают другие свойства. Разберем следующий CSS:

В этом коде margin-left перезаписывает более раннее объявление margin. Также повторяется селектор h1 для последовательных блоков объявлений. После оптимизации и минификации код превращается в:

CSSO удалил лишние пробелы, переносы строк и точки с запятой, а также сократил #ff6600 до #f60. Также были объединены свойства margin и margin-left в margin: 20px 30px 20px 0, а отдельные блоки селектора h1 были объединены в один.

Если вам не нравится, как CSSO переписывает ваш CSS-код, можете отключить функцию реструктуризации. Для этого просто воспользуйтесь флагом —restructure-off или –off. Например, csso style.css style.min.css -off даст следующий код:

Мы получили минифицированный, но не оптимизированный CSS-код. Отключение реструктуризации сделает ваши файлы чуть больше, чем они могли бы быть. Отключайте реструктуризацию только в случае, если у вас возникли проблемы.

В препроцессорах, с которыми мы познакомились в Главе 9, есть встроенная минификация. CSSO может сэкономить еще пару байт.

Автор: Tiffany Brown

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: