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

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

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

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

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

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

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

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

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

• PostCSS быстрый старт: настройка Gulp или
• PostCSS быстрый старт: настройка Grunt

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

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

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

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

1

npm install postcss-import css-mqpacker cssnano --save-dev

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

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

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

1

var atImport = require('postcss-import');

2

var mqpacker = require('css-mqpacker');

3

var cssnano = require('cssnano');

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

1

    var processors = [

2

  	atImport,

3

		mqpacker,

4

		cssnano

5

	];

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

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

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

1

        processors: [

2

          require('postcss-import')(),

3

          require('css-mqpacker')(),

4

          require('cssnano')()

5

        ]

Проверьте всё-ли работает запустив команду 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" добавьте следующую строку:

1

@import 'normalize.css';

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

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

1

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;.......

Вы можете использовать данный процесс для соединения любых других отдельных таблиц стилей, если это потребуется. Просто поместите строку с @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 здесь, в том случае если он ещё у вас не установлен.

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

1

@import 'normalize.css/normalize.css';

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

1

/* LAYOUT */

2

3

.column {

4

    width: 50%;

5

	float: left;

6

}

7

8

@media (max-width: 50rem) {

9

	.column {

10

		width: 100%;

11

		float: none;

12

	}

13

}

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

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

1

/* VISUALS */

2

3

.column_one, .column_two {

4

    border: 0.0625rem solid #ccc;

5

}

6

7

.column_two {

8

	border-left: 0;

9

}

10

11

@media (max-width: 50rem) {

12

	.column_one, .column_two {

13

		border: 0.0625rem solid #ccc;

14

	}

15

16

	.column_two {

17

		border-top: 0;

18

	}

19

}

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

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

1

/* LAYOUT */

2

3

.column {

4

    width: 50%;

5

	float: left;

6

}

7

8

/* VISUALS */

9

10

.column_one, .column_two {

11

	border: 0.0625rem solid #ccc;

12

}

13

14

.column_two {

15

	border-left: 0;

16

}

17

18

@media (max-width: 50rem) {

19

20

	.column {

21

		width: 100%;

22

		float: none;

23

	}

24

25

	.column_one, .column_two {

26

		border: 0.0625rem solid #ccc;

27

	}

28

29

	.column_two {

30

		border-top: 0;

31

	}

32

}

Обратите внимание: код выше будет минифицирован в "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":

1

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {

2

    /* This is an example of cssnano in action */

3

	font-weight: normal;

4

	margin-top: 1rem;

5

	margin-bottom: 2rem;

6

	margin-left: 1.5rem;

7

	margin-right: 2.5rem;

8

	font-weight: normal;

9

	padding: 1.75rem;

10

	width: calc(50rem - (2 * 1.75rem));

11

}

12

13

a {

14

	text-decoration: none;

15

	font-weight: bold;

16

}

17

18

p {

19

	font-weight: bold;

20

}

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

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

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

1

.css_nano,.css_nano+p,[class*=css_nano]{margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}a{text-decoration:none}a,p{font-weight:700}

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

• Пробелы и комментарии, также как и точки с запятой исчезли.
• 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:

1

// In Gulpfile 'processors' array

2

cssnano({

3

    minifyFontWeight: false

4

})

5

6

// In Gruntfile 'processors' array

7

require('cssnano')({

8

    minifyFontWeight: false

9

})

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

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

1

// In Gulpfile 'processors' array

2

cssnano({

3

    calc: {precision: 2}

4

})

5

6

// In Gruntfile 'processors' array

7

require('cssnano')({

8

    calc: {precision: 2}

9

})

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

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

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

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

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

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

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

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