Очищення непотрібних стилів 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). Це дуже навіть непоганий результат, і така оптимізація дозволила значно підвищити швидкість завантаження сайту в браузері.

Tags: CSS3HTML5Web

Recent Posts

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020

Футбольний Інстаграм – що нового у топових футболістів

Деякі відомі футболісти ретельно приховують свої особисте життя, а інші – активно постять фотографії з… Read More

24/08/2020

Види та типи компресійних панчіх

Вироби називають компресійними, коли їх застосовують для лікування, а також профілактики порушень кровотоку в нижніх… Read More

22/08/2020

Як правильно замінити оливу у двотактному гідроциклі?

Гідроцикли – це класний плавзасіб, який може подарувати вам незліченні години приємного проведення часу на… Read More

19/08/2020