Очищення непотрібних стилів CSS за допомогою PurifyCSS

В цьому уроці ми продовжимо вивчення роботи з консоллю і на практиці скористаємося інструментом для очищення стилів CSS – PurifyCSS.

PurifyCSS – це інструмент, що написаний на JavaScript, який розбирає розмітку файлів (HTML, PHP, і навіть JavaScript), і потім співвідносить її зі стилями CSS, які ви використовуєте. Будь-які селектори в стилях CSS, які не використовуються, будуть видалені, залишаючи тільки стилі, які вам насправді потрібні.

Встановлення інструменту

Щоб встановити PurifyCSS, ви можете завантажити його безпосередньо на GitHub, або встановити за допомогою системи управління пакетами npm (детальніше про роботу з терміналом розказано в попередньому уроці).

Для встановлення PurifyCSS через термінал, наберіть в консолі наступну команду:

npm install –g purify-css

Підготовка файлів розмітки та стилів CSS

Найпростіше інструмент очищення стилів застосовується до статичних файлів: наприклад, вказуєте шлях до статичного файлу з розміткою index.html і до єдиного файлу стилів, з яким буде співвідноситися ця розмітка.

Наприклад, складаєте ці два файли в окрему папку (d:\purify\) і запускаєте з цієї папки консоль. Бажано запускати консоль саме з тієї папки, з якої потрібно буде потім працювати, – так нам не доведеться прописувати повний шлях до потрібних файлів, і він підставиться автоматично.

Якщо ви використовуєте Total Commander: відкрийте потрібну папку, затисніть Shift і клацніть правою кнопкою миші десь в порожньому місці вікна поточної папки, – це відкриє контекстне меню, в якому доданий потрібний нам пункт «Відкрити вікно команд». При натисканні на цей пункт відкривається консоль з уже прописаним шляхом до використовуваного каталогу.

Те ж саме можна провернути і в простому Провіднику: відкрийте потрібну папку, наберіть у верхньому рядку пошуку cmd та натисніть Enter. Так ми відкри консоль, в якій вже прописаний потрібний нам шлях.

Зі статичними файлами все більш-менш зрозуміло, але як бути, якщо розмітка генерується динамічно (наприклад, двигуном WordPress або Magento), а файлів стилів багато і всі вони розташовані в різних місцях шаблону? Ми не стали винаходити велосипед, а вирішили привести всі ці динамічні дані до статичного виду. Наприклад, в браузері відкрили через сирцевий код (Ctrl+U) більшість різного типу сторінок (для WordPress – головну, сторінку категорій, сторінку тегів, сторінку архівів і сторінку одиночного запису; для Magento – головну, сторінку категорій і сторінку товару), потім методом копіювання/вставки зберегли весь цей вихідний код в один файл index.html, а також зберегли всі стилі в один файл стилів style.css.

Тепер, після підготовки потрібних файлів, настав час запускати інструмент очищення стилів.

Запуск PurifyCSS через консоль

Для запуску PurifyCSS, відкрийте папку проекту і запустіть з неї командний рядок (описано вище), потім в консолі виконайте команду із наступним змістом:

• команда purifycss для безпосереднього запуску додатка
• посилання на файл стилів CSS, які потрібно почистити (в нашому прикладі style.css)
• посилання на файл цільової розмітки (в нашому прикладі index.html)
• необов’язковий параметр --min; увімкніть його, якщо хочете, щоб вихідний файл CSS був мінімізований
• необов’язковий параметр --out; увімкніть його, щоб визначити бажане місце для збереження вихідного файлу
• необов’язковий параметр --info, – використовується для логування даного процесу очищення в терміналі
• і необов’язковий параметр --rejected, – якщо вказано, то в консолі буде зареєстровано всі селектори, які були видалені з вихідного файлу таблиці стилів

Наша фінальна команда виглядає наступним чином (всі вище зазначені параметри були використані):

purifycss style.css index.html --min --out purify-style.css --info --rejected

Ви можете вставити всю цю команду в консоль шляхом копіювання: виділіть команду і натисніть Ctrl+C, щоб скопіювати її; потім, щоб вставити скопійований текст в консоль потрібно використовувати комбінацію Alt+Spase (пробіл), щоб відкрити меню діалогового вікна, потім в меню оберіть Змінити – Вставити. Це вставить весь скопійований текст в консоль і вам залишиться тільки натиснути Enter, щоб запустити очищення стилів CSS.

P.S. Практичним шляхом було встановлено, що результати обробки динамічних файлів потребують додаткової перевірки, оскільки не всі селектори були враховані і деякі потрібні стилі були видалені. При обробці статичних сайтів, в основному, таких проблем не виникає.

Результат

При обробці статичних сторінок невеликого сайту вихідний файл стилів CSS став менше на більш ніж 100Кб (в основному були видалені невикористовувані стилі, взяті з фреймворка bootstrap). Це дуже навіть непоганий результат, і така оптимізація дозволила значно підвищити швидкість завантаження сайту в браузері.