Очищення непотрібних стилів 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

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020

Найкращі водоспади світу (частина 1)

Водоспад – це одне з найбільш хвилюючих і найкрасивіших творінь матінки-природи у світі. По всьому… Read More

31/10/2020