Používame pre-processor Less vo vývojovom prostredí Eclipse

Pri práci s CSS sa skôr či neskôr uvažuje o spôsobe, akým zefektívniť vývoj webu aj po tejto stránke. Medzi populárne nástroje v rámci profesionálneho web developmentu určite patria Sass a Less. V tomto článku sa pozrieme na použitie pre-processora Less v populárnom vývojovom prostredí Eclipse, keďže jeho inštalácia a konfigurácia nemusí byť až tak jednoduchá, ako sa na prvý pohľad zdá.

Celú konfiguráciu a inštaláciu Less je možné zhrnúť do nasledujúcich piatich krokov.

1. Inštalácia Less

Stiahnutie pre-processora Less.js pre Windows (https://github.com/duncansmart/less.js-windows/releases)
Rozbalenie archívu a inštalácia napríklad do adresára C:\Less

2. Inštalácia Node.js

Stiahnutie Node.js pre Windows (http://nodejs.org/)
Inštalácia súboru

3. Inštalácia Xtext SDK

Spustiť Eclipse
Otvoriť Eclipse Marketplace
VyhľadanieXtext SDK (org.eclipse.xtext.sdk.feature.group - Eclipse Modeling Project)
Inštalácia zásuvného modulu

4. Inštalácia Less

Vyhľadanie LESS (net.vtst.ow.eclipse.less.feature.feature.group - Vincent Simonet)
Inštalácia zásuvného modulu

5. Vytvorenie konfigurácie pre Less

Run Configuration / LESS Compiler / pravé tlačidlo (right click) / new configuration
- Nastavenie názvu (Name) - názov vytváranej konfigurácie
- Nastavenie LESS command: C:\Less\less.cmd
- Nastavenie Input File (vyhľadanie súboru *.less, ktorý sa bude kompilovať (transformovať na *.css)

Kompilácia Less v Eclipse

Pre spracovanie obsahu súboru *.less je potrebné spustiť kompiláciu. Tá bola nakonfigurovaná v poslednom bode. Stačí kliknúť na šípku vedľa ikony Run, zo zobrazeného menu vybrať Run As a potom LESS Compiler. Kompilátor následne vytvorí / prevedie súbor s príponou *.less na súbor s príponou *.css.

Záver

V prípade, že používateľ už má nainštalovaný Xtext, bod číslo 3 môže vynechať. Obdobne je možné postupovať aj pri Node.js.

Používame pre-processor Less vo vývojovom prostredí Eclipse

Kompilácia Less v Eclipse

Záver

Komentáre

Pridať komentár