В цьому уроці ми продовжимо вивчення роботи з консоллю і на практиці скористаємося інструментом для очищення стилів CSS – PurifyCSS.
PurifyCSS – це інструмент, що написаний на JavaScript, який розбирає розмітку файлів (HTML, PHP, і навіть JavaScript), і потім співвідносить її зі стилями CSS, які ви використовуєте. Будь-які селектори в стилях CSS, які не використовуються, будуть видалені, залишаючи тільки стилі, які вам насправді потрібні.
Щоб встановити PurifyCSS, ви можете завантажити його безпосередньо на GitHub, або встановити за допомогою системи управління пакетами npm (детальніше про роботу з терміналом розказано в попередньому уроці).
Для встановлення PurifyCSS через термінал, наберіть в консолі наступну команду:
npm install –g purify-css
Найпростіше інструмент очищення стилів застосовується до статичних файлів: наприклад, вказуєте шлях до статичного файлу з розміткою index.html і до єдиного файлу стилів, з яким буде співвідноситися ця розмітка.
Наприклад, складаєте ці два файли в окрему папку (d:\purify\
) і запускаєте з цієї папки консоль. Бажано запускати консоль саме з тієї папки, з якої потрібно буде потім працювати, – так нам не доведеться прописувати повний шлях до потрібних файлів, і він підставиться автоматично.
Якщо ви використовуєте Total Commander: відкрийте потрібну папку, затисніть Shift і клацніть правою кнопкою миші десь в порожньому місці вікна поточної папки, – це відкриє контекстне меню, в якому доданий потрібний нам пункт «Відкрити вікно команд». При натисканні на цей пункт відкривається консоль з уже прописаним шляхом до використовуваного каталогу.
Те ж саме можна провернути і в простому Провіднику: відкрийте потрібну папку, наберіть у верхньому рядку пошуку cmd
та натисніть Enter. Так ми відкри консоль, в якій вже прописаний потрібний нам шлях.
Зі статичними файлами все більш-менш зрозуміло, але як бути, якщо розмітка генерується динамічно (наприклад, двигуном WordPress або Magento), а файлів стилів багато і всі вони розташовані в різних місцях шаблону? Ми не стали винаходити велосипед, а вирішили привести всі ці динамічні дані до статичного виду. Наприклад, в браузері відкрили через сирцевий код (Ctrl+U) більшість різного типу сторінок (для WordPress – головну, сторінку категорій, сторінку тегів, сторінку архівів і сторінку одиночного запису; для Magento – головну, сторінку категорій і сторінку товару), потім методом копіювання/вставки зберегли весь цей вихідний код в один файл index.html, а також зберегли всі стилі в один файл стилів style.css.
Тепер, після підготовки потрібних файлів, настав час запускати інструмент очищення стилів.
Для запуску PurifyCSS, відкрийте папку проекту і запустіть з неї командний рядок (описано вище), потім в консолі виконайте команду із наступним змістом:
purifycss
для безпосереднього запуску додатка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). Це дуже навіть непоганий результат, і така оптимізація дозволила значно підвищити швидкість завантаження сайту в браузері.
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…