Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

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

by
Difficulty:IntermediateLength:ShortLanguages:

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 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 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
Advertisement
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.