Использование PostCSS для минимизации и оптимизации

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

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

Вы узнаете, как:

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

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

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

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

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

• Краткое руководство по PostCSS: настройка Gulp или
• Краткое руководство по PostCSS: настройка Grunt

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

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

Установить плагины

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

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

Загрузка плагинов через Gulp

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

Теперь добавьте каждое из этих новых имен переменных в ваш массив processors :

Проведите быструю проверку того, что все работает, запустив команду gulp css проверив, что новый файл «style.css» появился в папке dest вашего проекта.

Загрузка плагинов через Grunt

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

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

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

Встроенные / объединить файлы с @import

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

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

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

@import затем Inline Normalize.css

Давайте продолжим и сделаем это сейчас, импортируя, а затем вставляя Normalize.css в таблицу стилей нашего проекта. Начните с загрузки файла «normalize.css» в папку «src» вашего проекта по адресу https://necolas.github.io/normalize.css/.

В верхней части файла «src / style.css» добавьте следующую строку:

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

Скомпилируйте ваш файл, и когда вы посмотрите на файл «dest / style.css», вы увидите все содержимое «normalize.css» в нем:

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

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

Одной из очень полезных функций этого плагина является его способность автоматически обнаруживать CSS-файлы, расположенные внутри вашей папки «bower_components» или «node_modules».

Например, вместо ручной загрузки файла «normalize.css», как мы делали выше, вместо этого вы можете просто запустить команду bower install normalize.css --save в своем проекте. Это автоматически загрузит последний файл «normalize.css» в папку «bower_components / normalize.css».

Примечание . Если у вас на компьютере нет настройки Bower, узнайте, как это сделать .

В верхней части таблицы стилей вы могли бы вместо этого использовать эту строку:

Плагин postcss-import заглянет в вашу папку «bower_components» и найдет «normalize.css», а затем перейдет к ней, как в предыдущем примере.

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

Способы использования @import Inlining

Встраивание импортированных файлов 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 , который по умолчанию будет .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 Plugin Pack

Для всесторонней и многоплановой оптимизации 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-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% . Но если вы хотите сократить эту точность до двух десятичных знаков, вы можете сделать это так:

Значение 36.23% теперь будет составлять 36.23% .

Для получения дополнительной информации о вариантах cssnano посетите: http://cssnano.co/options

Быстрый обзор

Давайте кратко изложим то, что мы рассмотрели выше:

• Плагин postcss-import дает вам эффективный способ встроенных таблиц стилей.
• Его можно использовать для объединения сторонних таблиц стилей, в том числе посредством автоматического обнаружения в папке «bower_components» или «npm_modules».
• С его помощью можно разбить таблицы стилей на части, а затем объединить их позже.
• Плагин css-mqpacker позволяет дублировать медиазапросы, чтобы вы могли организовать свой CSS как угодно, в том числе в отдельные файлы, а затем объединить все соответствующие медиазапросы в окончательную таблицу стилей.
• Пакет cssnano объединяет около 25 различных плагинов, предоставляя подключи и играй доступ к длинному списку функций минимизации и оптимизации.
• Он может быть настроен на использование любых включенных плагинов с выбранными вами опциями.

Up Next: Предварительная обработка с PreCSS

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

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