Na początek ustalm,y co będzie nam potrzebne. Na pewno NetBeans (w wersji co najmniej 7.4), node.js, kompilator LESS i kompresor YUI.
Instalacja Node.js
Zaczniemy od zainstalowania Node.js. Jest on wymagany zarówno przez kompilator LESS, jak i kompresor YUI (oba są uruchamiane na platformie node.js). Całe środowisko node.js można pobrać stąd. Instalacja nie powinna zająć dużo czasu, platforma jest stosunkowo lekka.
Instalacja kompilatora LESS
Po zainstalowaniu Node.js w linii komend powinniśmy mieć dostępne polecenie npm. Pozwala ono na instalację bibliotek. Otwieramy linię komend (wciskamy Windows+R i wpisujemy cmd.exe, następnie naciskamy Enter). Kompilator LESS instalujemy poleceniem:
npm install less
Instalacja kompresora YUI (yui-compressor)
Aby skompresować skompilowane przez LESS pliki CSS, potrzebujemy jeszcze kompresora YUI. Instalujemy go podobnie jak LESS, korzystając z komendy:
npm install yui-compressor
Konfiguracja NetBeans
Po zainstalowaniu środowiska node.js i wszystkich wymaganych paczek musimy jeszcze skonfigurować NetBeans. Uruchamiamy więc nasze IDE i wchodzimy do opcji (menu Tools/Options) oraz do zakładki Miscellaneous. W zakładce CSS preprocessors znajdujemy opcję LESS path. Jeśli ścieżka nie jest uzupełniona, klikamy na przycisk Search obok tego pola. IDE powinno znaleźć automatycznie ścieżkę do kompilatora. Jeśli tak się nie stanie, możemy wpisać ją ręcznie bądź znaleźć. W moim wypadku jest to:
C:\Users\user0\AppData\Roaming\npm\lessc.cmd
Konfiguracja projektu
Na tym, niestety, nie koniec. Każdy projekt musi mieć włączoną kompilację LESS i ustawione ścieżki, skąd dokąd mają być kompilowane pliki. W tym celu klikamy prawym przyciskiem na nasz projekt i wchodzimy w Properties. Przechodzimy do kategorii CSS preprocessors i na zakładkę LESS. Zaznaczamy opcję Compile LESS Files on Save. Na liście Watch mamy domyślnie dwie ścieżki. Po lewej ścieżkę, gdzie znajdują się pliki LESS, które mają być kompilowane przy zapisie po prawej natomiast, gdzie przekompilowane pliki CSS mają być umieszczone. Ostatnią rzeczą jest ustawienie, by przy kompilacji pliki CSS były także kompresowane. W tym celu w polu Compiler Options wstawiamy "-x". Przykładowa zakładka parametrów kompilacji wygląda tak:
Podsumowanie
Korzystanie z LESS i kompresji nie tylko pozwoli nam zaoszczędzić czas w trakcie tworzenia projektu, ale także przyspieszy stronę, bo każdy kompilowany plik będzie jednocześnie kompresowany, zmniejszając przy tym wagę naszej strony. Niestety, dla każdego projektu, w którym chcemy korzystać z kompilacji LESS w locie i kompresji, musimy konfigurować projekt jak wyżej. Całe szczęście zajmuje to dosłownie chwilę.
