От автора: инструменты разработки помогают искать и фиксить ошибки рендеринга, но что по поводу эффективности: размер файлов максимально уменьшен? Для этого нам нужны инструменты минификации. В статье рассмотрим инструменты, с помощью которых возможна минификация CSS.
В контексте CSS минификация означает простое удаление лишних символов. Для примера давайте разберем кусок кода:
1 2 3 4 5 |
h1 { font: 16px / 1.5 'Helvetica Neue', arial, sans-serif; width: 80%; margin: 10px auto 0px; } |
Этот код вместе с символом перевода на новую строку и пробелами весит 98 байт. А теперь давайте взглянем на минифицированную версию:
1 |
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. В командной строке необходимо набрать:
1 |
npm install -g csso |
Флаг –g устанавливает CSSO глобально, чтобы потом можно было запускать инструмент из командной строки. Пользователям Linux и OS X, возможно, понадобится установить sudo (sudo npm install -g csso). Вы поймете, что sudo установился, когда NPM распечатает установочный путь в окне командной строки, и снова отобразится командная строка, как показано на Рисунке.
Минификация с помощью CSSO
Для минификации CSS-файлов запустите команду csso, передав имя файла в качестве аргумента: csso style.css
Будет выполнено базовое сжатие. CSSO удаляет ненужные проблелы, лишние точки с запятой и комментарии из файла.
По завершению CSSO распечатает оптимизированный код в стандартный вывод (текущий терминал или окно командной строки). Однако в большинстве случаев нам нужно сохранить выходные данные в файл. Для этого необходимо передать второй аргумент в csso – имя минифицированного файла. Например, для сохранения style.css в минифицированный файл style.min.css необходимо выполнить следующую команду:
1 |
csso style.css style.min.css |
По умолчанию CSSO изменит части вашего CSS. Например, он объединит блоки объявлений с дублирующими селекторами и удалит свойства, которые переписывают другие свойства. Разберем следующий CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { margin: 20px 30px; padding: 100px; margin-left: 0px; } h1 { font: 200 36px / 1.5 sans-serif; } h1 { color: #ff6600; } |
В этом коде margin-left перезаписывает более раннее объявление margin. Также повторяется селектор h1 для последовательных блоков объявлений. После оптимизации и минификации код превращается в:
1 |
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 даст следующий код:
1 |
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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.