Netbeans, SASS, Gulp i Node.js - praca z projektami | Melma.pl

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

Przejdź na skróty:

Instalacja Node.js
Instalacja SASS
Instalacja Gulp

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ę:

article_1_-_01

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):

article_1_-_02

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

article_1_-_03

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

article_1_-_04

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:

Ruby SASS (http://rubyinstaller.org/downloads/)
Aplikacje (z własnym GUI), taki jeka np. Hammer (http://hammerformac.com/), Compass (http://compass.kkbox.com/), czy CodeKit (https://incident57.com/codekit/)
Implementacja kompilatora SASS napisana w C/C++ (https://github.com/sass/libsass). Podobno szybsza kompilacja plików SCSS przy większych projektach (nie wiem, nie miałem okazji sprawdzić).

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ą)

article_1_-_05

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

article_1_-_06

Po zainstalowaniu Ruby uruchamiam wiersz poleceń i instaluję SASS poleceniem Ruby:

gem install sass

article_1_-_07

Mamy już zainstalowany kompilator SASS. Teraz w Netbeans należy wskazać ścieżkę do kompilatora:

article_1_-_08

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.

article_1_-_09

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

article_1_-_10

Po udanej instalacji czas na wskazanie ścieżki do zainstalowanego GULP’a w Netbeans:

article_1_-_11

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:

article_1_-_12

Jako typ pliku wybieram „package.json„:

article_1_-_13

Nazwę pliku należy zostawić domyślną (package):

article_1_-_14

W folderze głównym projektu zostanie utworzony plik package.json z domyślnymi ustawieniami:

article_1_-_15

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: