Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. PostCSS

PostCSS для минификации и оптимизации

by
Read Time:11 minsLanguages:
This post is part of a series called PostCSS Deep Dive.
Using PostCSS for Cross Browser Compatibility
PostCSS Deep Dive: Preprocessing with “PreCSS”

Russian (Pусский) translation by Anton L (you can also view the original English article)

В предыдущем туториале мы научились, как с помощью PostCSS сделать ваши таблицы стилей более кроссбраузерными, а точнее добавили поддержку старых версий IE.

В этом туториале мы научимся минификации и оптимизации таблиц стилей используя PostCSS, тем самым файлы будут загружаться быстрее и будут более эффективными.

Вы научитесь:

  • Комбинировать несколько таблиц стилей в одну используя правило @import, даже если некоторые из ваших таблиц стилей являются частью Bower компонента или npm модуля, для загрузки стилей веб-сайта потребуется лишь один http запрос.
  • Комбинировать множество медиа запросов в один, позволяя использовать медиа запросы в разных местах во время процесса разработки, но в конечном итоге иметь единственный объединённый запрос в таблице стилей.
  • Использовать cssnano для различных оптимизаций включая удаление пробелов и комментариев, а также минификацию определённых типов кода.

Давайте начнём!

Настройка проекта

Для начала вам понадобится добавить в ваш проект возможность использовать Gulp или Grunt, в зависимости от ваших предпочтений. Если у вас до сих пор нет предпочтений какой из них использовать, я рекомендую Gulp, так как для него нужно меньше кода, для получения аналогичного результата, работать с ним гораздо проще.

Вы можете прочитать о том как настроить Gulp или Grunt для использования PostCSS в предыдущем туториале

соответственно

Если вы не хотите вручную настраивать ваш проект с нуля, вы можете скачать исходники к данному туториалу, распаковать их и выбрать Gulp или Grunt начальный проект, после чего перенести содержимое в пустой каталог. Затем в терминале или командной строке windows откройте данный каталог и запустите команду npm install.

Установка плагинов

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

Плагины установлены, давайте теперь загрузим их в наш проект.

Загрузка плагинов с помощью Gulp

Если вы используете Gulp, добавьте следующие переменные под переменные которые уже существуют, в файле:

Теперь добавьте новые имена переменных в массив procesors:

Проверьте всё-ли работает запустив команду gulp css, после чего откройте созданный файл "style.css" , который появится в папке проекта "dest".

Загрузка плагинов с помощью Grunt

Если вы используете Grunt, обновите объект processors, который вложен в объект options, добавьте следующее содержание:

Проверьте всё-ли работает запустив команду grunt postcss, после чего откройте новый файл "style.css" , файл должен появится в папке вашего проекта под названием "dest".

Теперь все необходимые плагины установлены и загружены, давайте начнём обучение, как использовать их для минификации и оптимизации.

Встраивание/Комбинирование файлов с @import

Вместо того, чтобы загружать несколько таблиц стилей, гораздо эффективнее, когда есть такая возможность, соединить их в одну.

К примеру, довольно популярно использовать Normalize.css, однако если вы загружаете normalize, как отдельную таблицу стилей, понадобится несколько http запросов, тем самым время загрузки сайта станет более медленным.

Если использовать плагин postcss-import под авторством Maxime Thirouin, можно добавить Normalize.css в вашу основную таблицу стилей, посредством правила @import, в итоге у вас получится тот же CSS, но лишь с одним http запросом.

@import, встраивание Normalize.css

Теперь давайте сделаем следующее, импортируем, после чего встроим код Normalize.css в наш проект. Для начала скачайте "normalize.css" в папку проекта "src" https://necolas.github.io/normalize.css/

На верху вашего "src/style.css" добавьте следующую строку:

У вас уже установлен postcss-import, это всё что требовалось сделать. postcss-impot заметит правило @import и автоматически встроит и добавит normalize.css в вашу таблицу стилей.

Скомпилируйте ваш файл и взгляните на "dest/style.css", там будет находится всё содержимое "normalize.css":

Вы можете использовать данный процесс для соединения любых других отдельных таблиц стилей, если это потребуется. Просто поместите строку с @import в ваш "src/style.css" в том месте куда вы хотите встроить код.

Автоматическое обнаружение Bower компонентов и Node модулей

Одна очень полезная функция данного плагина - возможность автоматически находить CSS находящиеся в "bower_components" или "node_modules".

К примеру, вместо того, чтобы вручную скачивать "normalize.css" как мы сделали прежде, вы можете просто запустить команду bower install normalize.css --save в вашем проекте. Тем самым автоматически будет скачена последняя версия "normalize.css" в папку "bower_components/normalize.css" .

Обратите внимание: узнайте как поставить Bower здесь, в том случае если он ещё у вас не установлен.

На верху вашей таблицы стилей, вы можете использовать следующую строку:

Плагин postcss-import найдёт файл "normalize.css" в папке "bower_components", после чего встроит ваш код.

Такой же процесс можно применить к каталогу "node_modules", тем самым вы можете использовать Bower или npm для скачивания файлов, управления зависимостями, а также их обновление. Когда используется любой из этих инструментов, плагин позволяет вам соединить внешние CSS файлы и добавить их в основную таблицу стилей.

Способы улучшить встраивание кода с @import

Встраивание CSS файлов импортом не только очень эффективный способ скомбинировать файлы из различных источников, таких как Bower компоненты, также это даёт вам возможность организовать стили вашего проекта в множество отдельных таблиц стилей.

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

  1. Скопируйте оригинальную цветовую схему
  2. Модифицируйте её, добавив новые цвета
  3. Импортируйте новую цветовую схему в ваш проект
  4. Скомпилируйте, чтобы в итоге получить альтернативные цвета

Вы можете повторить данный процесс, сколько угодно раз, это довольно эффективный подход создавать различные цветовые схемы для одного дизайна.

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

Больше деталей о postcss-import можно прочитать здесь: https://github.com/postcss/postcss-import

Комбинирование одинаковых медиа запросов

Плагин css-mqpacker от Kyo Nagashima находит одинаковые медиа запросы в вашей таблице стилей и соединяет их в один запрос. Это позволяет вам организовать ваш CSS, как вам угодно во время процесса разработки, повторяя медиа запросы если необходимо, не беспокоясь, что размер конечных стилей увеличится.

Давайте разберём пример в котором будут повторяться медиа запросы, к примеру если ваши стили для лейаута и дизайна визуальных элементов организованны отдельно. В реальном проекте это может означать, что будут использоваться совершенно разные файлы, один для лейаута, другой для визуальных элементов, но для простоты примера, мы будем использовать один файл "src/style.css" .

Мы начнём с кода лейаута. Мы добавим класс .column, который отвечает за создание колонок 50% шириной, по умолчанию расположенные рядом друг с другом. Затем мы используем медиа запросы, чтобы поместить их друг под другом на экранах меньшего размера. Добавьте этот код в таблицу стилей:

После этого мы добавим стили для визуальных элементов, установим серые границы для наших колонок. Первая колонка будет иметь класс .column_one, в то время как вторая будет иметь класс .column_two. Мы будем использовать такой же медиа запрос, который мы использовали во время описания лейаута, чтобы изменить то как мы добавляем границы к колонкам, в зависимости от того находятся они рядом друг с другом или одна колонка находится над другой.

Также добавим данный код в нашу таблицу стилей:

Теперь, скомпилируем "src/style.css" файл и посмотрим на стили, которые мы получим в результате "dest/style.css" .

Как можно заметить в коде ниже, плагин css-mqpacker нашёл одинаковые медиа запросы и соединил их в один:

Обратите внимание: код выше будет минифицирован в "dest/style.css" благодаря плагину cssnano. Чтобы ознакомиться с не минифицированным файлом, закомментируйте cssnano в массиве processors, в Gulpfile или Gruntfile.

Информация о css-mqpacker на https://github.com/hail2u/node-css-mqpacker

cssnano набор плагинов

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

Помимо большого списка оптимизаций, он может:

  • Убрать пробелы и точку с запятой
  • Убрать комментарии
  • Оптимизировать шрифты
  • Убрать повторяющиеся правила
  • Оптимизировать calc()
  • Минифицировать селекторы
  • Минифицировать длинные свойства
  • Соединить правила

Мы обработаем данным плагином, код из нашего проекта, тем самым на примере увидим применение всех оптимизаций.

Добавьте код в файл "src/style.css":

После чего скомпилируйте файл.

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

В файле "dest/style.css" вы должны увидеть оптимизированный код:

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

  • Пробелы и комментарии, также как и точки с запятой исчезли.
  • font-weight: normal и font-weight: bold были сконвертированы в font-weight: 400 и font-weight: 700
  • Повторяющиеся правило font-weight: normal; также исчезло из .css_nano таблицы стилей
  • Свойство calc() стало статичным значением
  • Селектор .css_nano, .css_nano + p, [class*="css_nano"], .css_nano были минифицированы в .css_nano,.css_nano+p,[class*=css_nano]
  • Длинные свойства margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem были сконвертированы в margin:1rem 2.5rem 2rem 1.5rem;
  • Для стилей a и p общее свойство font-weight: 700; было объединено

Чтобы узнать больше о доступных оптимизациях cssnano взгляните на: http://cssnano.co/optimisations/

Конфигурация опций и отключение модулей

Есть несколько независимых плагинов, которые работают с набором cssnano, скорее всего вы захотите настроить их, или отключить некоторые из них.

Чтобы отключить плагин, добавьте название плагина к опциям cssnano с опцией "false". К примеру если нет необходимости оптимизировать шрифты добавьте следующее в Gulpfile/Gruntfile:

Таким же образом можно сконфигурировать опции плагина, добавьте название плагина затем установите необходимую опцию.

Например установить количество десятичных знаков, которые использует плагин calc. По умолчанию calc( 100% / 2.76) выдаст результат равный 36.23188%. Если хотите уменьшить количество десятичных знаков до двух, вы можете сделать это следующим образом:

Результат calc будет равен 36.23%.

Узнать больше об опциях cssnano можно, посетив: http://cssnano.co/options

Краткое содержание

Давайте ещё раз взглянем, что мы разобрали в данном туториале:

  • Плагин postcss-import предоставляет вам эффективный способ встраивать таблицы стилей.
  • Он может быть использован для комбинирования внешних библиотек со стилями, включая автоматическое обнаружение в каталогах "bower_components" или "node_modules"
  • Также он может быть использован для разделения стилей на части, после чего они могут быть соединены в одну таблицу стилей.
  • Плагин css-mqpacker позволяет дублировать медиа запросы, включая медиа запросы в отдельных файлах, можно организовать ваш CSS как вам угодно, после чего все повторяющиеся медиа запросы будут соединены в один, в конечной таблице стилей.
  • Набор cssnano включает 25 разнообразных плагинов, подключив его и начав с ним работу, вы можете воспользоваться списком различных функций по минификации и оптимизации.
  • Данный набор плагинов может быть сконфигурирован как вы хотите, вы решаете какие опции и плагины стоит добавить или исключить.

Далее: препроцессоры с PreCSS

В следующем туториале мы разберём как с помощью PostCSS использовать препроцессоры, благодаря отличному набору плагинов PreCSS. Данный набор плагинов позволяет использовать синтаксис похожий на Sass с похожим функционалом, переменными, миксинами, условиями и расширениями и так далее.

Увидимся в следующем туториале!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.