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

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

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

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

h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}

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

h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}

Теперь наш 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. В командной строке необходимо набрать:

npm install -g 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 style.css style.min.css

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

body {
margin: 20px 30px;
padding: 100px;
margin-left: 0px;
}

h1 {
font: 200 36px / 1.5 sans-serif;
}

h1 {
color: #ff6600;
} 

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

body{padding:100px;margin:20px 30px 20px 0}h1{font:200 36px/1.5 sans-serif;color:#f60}

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

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

body{margin:20px 30px;padding:100px;margin-left:0}h1{font:200 36px/1.5 sans-serif}h1{color:#f60}

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

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

Автор: Tiffany Brown

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree