Netbeans, SASS, Gulp i Node.js – praca z projektami

W projekcie opartym na WordPressie chcę utworzyć motyw wykorzystując SASS do zarządzania stylami CSS. Zmiany w pliku (plikach) SASS (np. /my-project/wp-content/themes/my-template/sass/) powodują aktualizację (lub utworzenie) wskazanego pliku (plików) ze stylami CSS (np. /my-project/wp-content/themes/my-template/css/my-style.css), a następnie aktualizację (lub utworzenie) wyjściowych plików CSS ze skompresowaną zawartością (np. /my-project/wp-content/themes/my-template/css/my-style.min.css).
Kolejnym zadaniem Netbeans będzie sprawdzanie, czy zaszły zmiany we wskazanych plikach JS szablonu (np. /my-project/wp-content/themes/my-template/js/my-script.js) i ew. utworzenie ich skompresowanej wersji (np. /my-project/wp-content/themes/my-template/js/my-script.min.js)

Etapy

Instalacja Node.js

Node.js to platforma umożliwiająca uruchamianie kodu JavaScript spoza przeglądarki. Zbudowana jest na tym samym silniku JavaScript, który użyty jest w Google Chrome (V8).
Pobieram najnowszą wersję instalatora ze strony https://nodejs.org/en/download/ (należy wybrać odpowiednią wersję do posiadanego systemu operacyjnego. W moim przypadku jest to Windows 64-bitowy) i instaluję:

Podczas instalacji należy zwrócić uwagę na to, aby została dodana ścieżka do zmiennej systemowej PATH (domyślne ustawienia instalatora są wystarczające):
Po instalacji warto sprawdzić, czy udało się z powodzeniem zainstalować Node.js. W tym celu otwieram okno wiersza poleceń i wpisuję komendę

npm -v

która zwróci mi numer wersji zainstalowanego Node.js

W Netbeans dodajemy ścieżkę do zainstalowanego Node.js:

Instalacja SASS

SASS (Syntactical Awesome Stylesheet) jest to język skryptowy, którego kod jest przetwarzany do wynikowych plików CSS. Daje duże możliwości w zakresie wygodnego tworzenia rozbudowanych kaskadowych arkuszy stylów, umożliwia stosowanie zmiennych, pętli, struktur zagnieżdżonych, mixiny (funkcje), wygodne operacje na kolorach, takie jak np. rozjaśnianie, przyciemnianie, odwracanie kolorów i wiele innych przydatnych narzędzi. Stosowane są dwie konwencje kodowania:

  • Sassy CSS (SCSS), wywodzący się z CSS, gdzie atrybuty grupujemy w klamrach i oddzielamy między sobą średnikami.
  • SASS wywodzący się z języka HAML, gdzie pomijane są klamry i rozdzielające średniki
Dostępne są trzy znane mi metody instalacji kompilatora SASS:
Decyduję się na Ruby SASS (nie jest przy tym konieczna znajomość Ruby). Pobieram najnowszą zalecaną wersję instalatora interpretera Ruby (http://rubyinstaller.org/downloads/). Rekomendowana jest najnowsza 32-bitowa wersja z serii 2.2.x. (wersja 64-bitowa w momencie pisania tego tutoriala nie jest zalecana, ze względu na swój zbyt młody wiek i możliwe przez to problemy z kompatybilnością)
Podczas instalacji należy pamiętać o zaznaczeniu opcji „Add Ruby executables to your PATH”, aby polecenia Ruby były dostępne z poziomu konsoli wiersza poleceń.
Po zainstalowaniu Ruby uruchamiam wiersz poleceń i instaluję SASS poleceniem Ruby:

gem install sass
Mamy już zainstalowany kompilator SASS. Teraz w Netbeans należy wskazać ścieżkę do kompilatora:
Teraz w utworzonym w Netbeans projekcie zaznaczam opcję kompilacji plików SASS przy ich próbie zapisu oraz wskazuję na foldery w których znajdują się pliki SASS i foldery, w których mają znaleźć się skompilowane pliki CSS). W tym momencie Netbeans będzie kompilował tylko pliki SCSS położone we wskazanych folderach wejściowych i zapisywał ich skompilowane wersje w folderach wyjściowych). Gdy zainstaluję GULP’a odznaczę tą opcję i wyczyszczę wprowadzone tu ścieżki do folderów, gdyż GULP przejmie m.in. to zadanie.

Instalacja kompilatora GULP

Gulp.js to system automatyzacji pracy oparty o platformę Node.js. Umożliwia wykonywanie określonych zestawów zadań (tzw. tasków) na danym folderze (plikach). Możemy np ustawić task, który spowoduje przeszukanie wszystkich plików CSS w danym folderze, połączenie ich, a następnie kompresję i zapisanie w nowej lokalizacji.

Aby zainstalować gulp pod Windows potrzebny będzie node.js (opis instalacji na początku tego tutoriala). Uruchamiam okno wiersza poleceń i instaluję gulp’a globalnie funkcją

npm install -g gulp

Umożliwi to wykonywanie poleceń GULP’a z poziomu wiersza poleceń.

Po udanej instalacji czas na wskazanie ścieżki do zainstalowanego Gulp’a w Netbeans:
Od tego momentu wszystkie dalsze działania wykonywać będziemy już tylko za pomocą Netbeans.

Przy każdym projekcie wymagana jest lokalna instalacja Gulp’a.

Wybieram nowy plik:

Jako typ pliku wybieram „package.json„:
Nazwę pliku należy zostawić domyślną (package):
W folderze głównym projektu zostanie utworzony plik package.json z domyślnymi ustawieniami:
Do naszych potrzeb najistotniejsze informacje związane z plikiem package.json, to:
  • wartość „name” musi być wypełniona i unikalna
  • wartość „version” musi być wypełniona i zgodna ze standardem
  • dependencies” zamieniamy na devDependencies (lub dodajemy kolejną właściwość: „devDependencies„, pamiętając o dodaniu przecinka po „dependencies”: {} )
Czas na kilka słów wytłumaczenia. Co to jest dependencies i devDependencies, oraz czym się różnią (poza nazwą).
W dependencies i devDependencies podajemy moduły, które mają zostać pobrane i być dostępne w taskach związanych z naszym projektem.
Mój przykładowy plik package.json wygląda następująco:
Info Interaktywny przewodnik po dostępnych najważniejszych właściwościach pliku package.json znajduje się na stronie http://browsenpm.org/package.json
Info Szczegółowa specyfikacja pliku package.json znajduje się na stronie https://docs.npmjs.com/files/package.json

Aby móc skorzystać z gulp musimy jeszcze utworzyć plik gulpfile.js w folderze głównym projektu.

Udostępnij

Komentarze

Dodaj komentarz

Powiadom o
avatar
wpDiscuz

Oferta

Katalog stron na sterydach
Front-end – jeden z dostępnych szablonów
Front-end – jeden z dostępnych szablonów
Panel administracyjny
Panel administracyjny
Panel administracyjny
Panel administracyjny – motyw 2
Panel administracyjny – motyw 1
  • Błyskawicznie zbudujesz potężne zaplecze
  • Niepowtarzalny wygląd wyróżni Twój skrypt
  • Motywy graficzne zmienisz jednym kliknięciem
  • Funkcje usprawniające pozycjonowanie i obsługę
Czytaj więcej...