Використовуйте Gulp і UnCSS, щоб зменшити ваш рівень CSS Four Kitchens

Фреймворки CSS - це приємний спосіб розпочати роботу з проектом. Ви можете сказати за назвою багатьох популярних фреймворків: Bootstrap, Foundation та Skeleton, щоб назвати лише декілька. Всі ці імена викликають вихідну точку - проблема полягає в тому, що, якщо ви не витратите час, щоб усунути шматки, якими ви не користувались, ви доставите роздутий код своїм користувачам.

kitchens

Почніть з усього, доставляйте те, що вам потрібно

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

Однак, коли настає час відправляти, залишити повну структуру на місці означає, що ви надаєте непотрібне роздуття кожному користувачеві. Можливо, ви використовували три із шести кнопок, які вони надають, або вирішили впровадити власну мережеву систему в середині проекту. Видалення їх вручну є нудним і дещо нестабільним, оскільки ви можете випадково видалити те, що використовується.

UnCSS на допомогу

Поширеним способом уникнути цієї проблеми є використання UnCSS, інструменту, який порівнює ваш HTML і CSS, видаляючи біти CSS, які він виявляє невикористаними. Він використовує PhantomJS під капотом для відтворення набору сторінок, включаючи JavaScript. Після відображення сторінки в пам'яті вона порівнює всі селектори на відтвореній сторінці з вихідними файлами CSS. Звідти він може генерувати новий файл CSS, який містить селектори, які ви насправді використовували, і нічого іншого!

Автоматизація UnCSS

UnCSS - це оснащення для використання. Ви надаєте йому список файлів CSS та список URL-адрес, які він повинен відтворити, а решту робить. Приклад завдання gulp-uncss у нашому навчальному наборі з роботи з інтерфейсом значно зменшує копію Bootstrap. Ви можете побачити це в контексті більшого файлу Gulp на GitHub, але ось саме завдання: