Jak poprawnie korzystać z LESS - kompilacja lokalna

Trochę ponad rok temu napisałem post, w którym omawiałem sposób kompilacji plików LESS po stronie serwera, wykonywanej w ramach skryptu PHP. Pod wpisem pojawił się komentarz (celny zresztą), że najwydajniejsze jest kompilowanie LESS lokalnie, a nie już na serwerze produkcyjnym. Zajmę sie tym w niniejszym wpisie.

Kompilacja LESS możliwa jest z poziomu linii poleceń. Zanim jednak zaczniemy się radośnie bawić w wypluwanie plików CSS, musimy się upewnić, że mamy zainstalowane, co trzeba.

Po pierwsze: Node.js. Jest to środowisko wykonywania kodu JavaScript po stronie serwera, bazujące na silniku V8 (a więc tym obecnym w przeglądarce Chrome). Razem z Node.js powinien zainstalować się npm, czyli Node Package Manager. Za jego pomocą można zainstalować sobie kompilator LESS — wystarczy w linii komend wpisać polecenie:

npm install -g less

Menedżer paczek pobierze co trzeba i od tego momentu można będzie użyć komendy lessc. Jako argument podajemy plik wejściowy, a skompilowany kod CSS zwracany jest do standardowego wyjścia — wystarczy zatem przekierować go do docelowego pliku.

lessc wejscie.less > wyjscie.css

Przy okazji możemy pozwolić sobie na skompresowanie CSS. Najprościej można to osiągnąć podając przed plikiem wejściowym parametr -x.

lessc -x wejscie.less > wyjscie.css

Co ciekawe, możemy w ten sposób zapewnić sobie skompilowanie wielu plików do jednego. Kod LESS można spokojnie rozbić na wiele plików, a następnie zebrać je wszystkie w kolejnym pliku za pomocą komend @import:

@import "plik1.less";
@import "plik2.less";
@import "plik3.less";

Kompilator LESS jest na tyle inteligentny, że wskazane w ten sposób źródła również skompiluje i włączy do pliku wyjściowego — możemy zatem pracować na wielu plikach, a w wersji produkcyjnej połączyć wszystkie w jeden plik ze stylami.

Automatyzacja w WebStorm/PHPStorm

Szczęśliwcy, którzy korzystają z IDE WebStorm lub PHPStorm, mogą poprosić swoje środowisko programistyczne o odpalenie kompilatora LESS w tle za każdym razem, gdy jakiś plik LESS ulegnie zmianie. Ułatwia to pracę i sprawia, że nie trzeba pamiętać o ręcznym kompilowaniu stylów przed wypchnięciem na serwer produkcyjny.

Skorzystać należy z pluginu o nazwie File Watchers. Wystarczy skonfigurować file watcher dla plików LESS. W okienku konfiguracyjnym podajemy ścieżkę do pliku wykonywalnego kompilatora LESS (IDE powinno samo ścieżkę wykryć), konfigurujemy parametry wejściowe i wyjściowe — i tyle! Od tego momentu każda modyfikacja pliku LESS spowoduje skompilowanie go do wyjściowego pliku CSS.

​Automatyzacja za pomocą Git hooks

Użytkownicy systemu kontroli wersji Git mają ciekawą możliwość do dyspozycji: hooks. W katalogu .git/hooks danego projektu wystarczy stworzyć odpowiedni plik wykonywalny — zwykły skrypcik Basha, który zawoła kompilator LESS. Gdy dodamy ten plik do hooka pre-commit, to za każdym razem, gdy wykonujemy commit naszego kodu, Git zadba o to, żeby skompilować pliki LESS do CSS. Jako dygresję zaznaczę, że można tu dopisać również inne działania, np. po zainstalowaniu paczki uglify-js, możemy zostawić Gitowi minifikację plików JavaScript, samemu skupiając się na wersji niezminifikowanej.


Komentarze

Arek

2013-08-17, 00:34

Można też do tego podejść za pomocą programu Koala (bądź innego podobnego). Po szybkiej konfiguracji program przy każdej zmianie pliku .less wygeneruje w podanym miejscu plik .css (niezależnie od edytora).


Napisz komentarz


Szukaj wpisów


Chmura tagów