Advertisement
  1. Web Design
  2. CSS

Usuwanie zbędnego kodu CSS za pomocą PurifyCSS i Grunt

Scroll to top
Read Time: 3 min

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

W tym poradniku, pokażę ci jak wykorzystać Grunt i PurifyCSS do stworzenia lekkiego arkusza stylów bez większego wysiłku. Najpierw zainstalujemy i uruchomimy arkusz za pomocą Grunt oraz bez niego, aby uzyskać znacznie bardziej wydajne style.

Obejrzyj wideo

PurifyCSS jest narzędziem JavaScript, które analizuje pliki znaczników (HTML, PHP lub nawet JavaScript), a następnie odnosi je do dowolnego kodu CSS, z którego korzystasz. Wszystkie nieużywane selektory zostaną usunięte z kodu CSS, pozostawiając tylko te style, które rzeczywiście są potrzebne.

Zainstaluj

Aby zainstalować PurifyCSS, możesz pobrać pliki bezpośrednio z GitHub lub zainstalować je przez npm (więcej szczegółów na ten temat w poradniku od Kezz).

install via npminstall via npminstall via npm
Instalowanie przez npm

Nasz projekt

Pliki, które będziemy używać do demonstracji PurifyCSS to pełny arkusz stylów Bootstrap i index.html. Możesz pobrać je z repozytorium. Plik index.html jest całkiem prosty; zawiera główną sekcję z kilkoma przyciskami, elementami formularza i siatką Boostrap; w tym przypadku, z pewnością nie potrzebujemy całej biblioteki stylów.

bootstrap stylesbootstrap stylesbootstrap styles
Pełny arkusz stylów Bootstrap

Uruchom PurifyCSS

Aby uruchomić PurifyCSS w arkuszu stylów. otwórz wiersz poleceń, przejdź do folderu projektu i wpisz polecenie zawierające następujące elementy:

  • na początku polecenie purifycss
  • źródłowy arkusz stylów, który ma być oczyszczony
  • docelowe pliki znaczników, w tym przypadku index.html
  • opcjonalny parametr --min, jeśli chcemy zminimalizować kod CSS
  • opcjonalny parametr --out, po którym możemy określić, gdzie chcemy zapisać uzyskany plik
  • opcjonalny parametr --info, jeśli chcemy zapisać dziennik procesu w terminalu.
  • opcjonalny parametr --rejected, który zapisuje wszystkie selektory odrzucone ze źródłowego arkusza stylów.

Nasze ostateczne polecenie wygląda tak:

Rezultat

Źródłowy arkusz stylów został zmniejszony o ponad 100Kb, dobra robota!

Używanie PurifyCSS z Grunt

Aby jeszcze bardziej zautomatyzować nasz proces, możemy użyć systemu do uruchamiania zadań, takiego jak Grunt. Wracając do punktu początkowego, musimy dodać package.json do naszego projektu. Uruchomienie npm init z naszego folderu przeprowadzi nas przez proces kreacji package.json, tworząc głównie plik z następującą zawartością:

Kolejnym etapem jest zainstalowanie Grunt, jeśli jeszcze tego nie zrobiliśmy:

Po zakończeniu instalacji, zwróć uwagę, że folder "node_modules" został dodany do projektu.

Zainstaluj wtyczkę Grunt

Następnie musimy zainstalować wtyczkę Grunt dla PurifyCSS.

Utwórz Gruntfile

Teraz musimy utworzyć plik o nazwie gruntfile.js. Przeglądnij pliki źródłowe, aby zobaczyć co zawiera ten plik, ale zwróć szczególnie uwagę na samo zadanie Grunt:

Opcje w obiekcie docelowym powinny być ci znane z poprzedniego ćwiczenia, a po ustawieniu tych parametrów, nasz plik jest gotowy.

Aby uruchomić Grunt, wpisz w terminal:

Podsumowanie

Zakończyliśmy! Omówiliśmy dwa różne sposoby na wykorzystanie PurifyCSS do oczyszczenia arkuszy stylów. Pamiętaj: nie ma sensu, aby przeglądarka wczytywała kilobajty stylów, które nie są nawet używane, wydajność ma znaczenie!

Przydatne materiały

Więcej poradników na temat Grunt na Tuts+


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.