Kompilacja i minifikacja plików

Kompilacja i minifikacja plików

W standardowych szablonach style napisane są za pomocą preprocesora języka CSS jakim jest Sass. W efekcie style są umieszczane w plikach .scss. Niestety, przeglądarki nie potrafią ich odczytać, dlatego należy je przekompilować do plików .css, które już mogą zostać przez nie zidentyfikowane.

Minifikacja plików to inaczej kompresja pliku, w wyniku której waży on mniej. Dzięki temu strona internetowa będzie ładować się szybciej. Minifikację można przeprowadzić ręcznie, jednak jest to praca żmudna i mało wydajna.

W tym artykule dowiesz się, jak automatycznie kompilować i minifikować pliki. Podczas tych operacji będziesz pracować na plikach lokalnych. Z pomocą przyjdzie Ci narzędzie Liquid Sync. Wszystkich informacji na jego temat dowiesz się z tego artykułu.

1. Node.js

Na początku musisz zainstalować Node.js. Instalator dostępny jest tutaj. W efekcie otrzymasz środowisko do dalszej pracy z plikami.

2. Folder nodejs

Po instalacji Node.js, należy dodać specjalny folder w plikach szablonu o nazwie nodejs. W tym folderze będą się znajdować wszystkie pliki wymagane do uruchomienia minifikacji.

Wskazówka
Pracuj na plikach lokalnych na swoim komputerze, a nie na tych znajdujących się w panelu administracyjnym.

3. Gulp

Gulp to narzędzie, które za Ciebie wykona automatyczną kompilację i minifikację plików. W tym nowym folderze (nodejs) dodaj plik gulpfile.js o zawartości jak poniżej:

W zależności od tego jakiego szablonu używasz, to folder z plikami .scss może różnić się nazwą:

  • W szablonach Agat i Opal folder ten nazywa się sass.
  • W szablonach Bursztyn i Szafir jest to scss.
Wskazówka
W podanym kodzie uwzględniony jest folder sass. Jeśli Twój nazywa się scss, to należy w powyższym pliku gulpfile.js w linijkach 7, 13 i 17 zmienić jego nazwę z sass na scss.

4. NPM

Ostatni krok, to dodanie NPMa (Node Package Manager). Do tej operacji potrzebny jest terminal. Jeśli nie posiadasz programu do edycji kodu, który udostępniałby taki terminal, to nic nie szkodzi. Wystarczy uruchomić terminal, który jest dostępny w systemie w następujący sposób:

Wskazówka
Jeśli używasz narzędzia Liquid Sync to upewnij się, że jest ono wyłączone przed wykonaniem następnego kroku.
  • Otwórz folder nodejs, wciśnij i przytrzymaj na klawiaturze lewy Shift, a następnie kliknij prawym przyciskiem myszy w dowolne pole tego otwartego folderu.
  • Otworzy się lista opcji, na której wybierz: Otwórz okno polecenia tutaj.
  • Teraz możesz zainstalować NPMa w swoim projekcie. Wystarczy, że wpiszesz komendę:

npm init

i zatwierdzisz ją klawiszem ENTER. Operacja może potrwać dłużej.

  • Gdy operacja się zakończy, wpisz kolejną komendę:

npm install –save-dev gulp gulp-sass gulp-uglify-es gulp-rename

Zainstaluje ona wtyczki, które umożliwią poprawne działanie funkcji z pliku gulpfile.js. Komendę najlepiej przekopiować do okna polecenia. Jeśli jednak wpisujesz ją ręcznie, to zwróć uwagę, że przed słowem save są dwa myślniki, a nie jeden.

Wskazówka
Jeśli używasz narzędzia Liquid Sync to teraz należy zmienić nazwę folderu z nodejs na .nodejs. Dzięki dodaniu tej kropki na początku nazwy folderu, będzie on pomijany przy synchronizacji plików.

Komendy do kompilacji i minifikacji

Po wykonaniu powyższych kroków, możesz już przystąpić do kompilacji i minifikacji. W pliku gulpfile.js jest zdefiniowanych kilka funkcji. Poniżej krótki opis tych funkcji oraz sposobu ich wywołania:

  • Kompilacja plików .scss do .css

Komenda gulp sass spowoduje przekompilowanie plików .scss do plików .css. Dzięki temu będziesz mógł edytować style w plikach .scss.

  • Automatyczna kompilacja plików .scss do .css

Jeśli komenda gulp sass przypadła Ci do gustu, to ta spodoba Ci się jeszcze bardziej. Komenda gulp watch spowoduje, że automatycznie po każdej zmianie w dowolnym pliku .scss zostanie uruchomiona kompilacja do pliku .css.

  • Minifikacja plików .css

Otrzymane pliki .css możemy zminifikować. Odpowiada za to komenda gulp css. Po jej uruchomieniu wszystkie pliki .scss zostaną przekompilowane do plików .min.css. Taki plik będzie dużo mniejszy od zwykłego pliku .css.

  • Minifikacja plików .js

Nie tylko pliki ze stylami mogą być zminifikowane. Warto zminifikować również pliki .js. Zrobisz to komendą gulp js. Pamiętaj jednak, że komenda ta dla wszystkich plików .js (z folderu JS znajdującego się w Twoim szablonie) tworzy kopie z dopiskiem .min w nazwie. Oznacza to, że jeśli są w nim już wcześniej zminifikowane pliki, to one też zostaną niepotrzebnie skopiowane i zminifikowane raz jeszcze (co jest zbędną operacją). Zalecamy zatem przed minifikacją plików .js usunięcie z folderu JS wszystkich plików z końcówką .min.js.

Wyjątkiem jest plik jquery.mcustomscrollbar.concat.min.js znajdujący się w szablonie Agat, którego nie należy usuwać. W tym przypadku należy tylko usunąć jego kopię z końcówką .min.min.js.

  • Minifikacja plików

Ostatnia komenda to gulp minify. Minifikuje jednocześnie pliki .css i pliki .js.

Czy ten artykuł był pomocny?