LESS automatisch in CSS übersetzten lassen

veröffentlicht am 26. Mai 2012

Sprachen wie SASS, LESS oder Stylus erleichtern Webdesignern die Arbeit beim Erstellen von Stylesheets. Ich habe vor kurzem bei einem Projekt LESS eingesetzt. Hier kann der Quellcode Server- oder Clientseitig per JavaScript verarbeitet oder aber auch mit einem Compiler in normales CSS übersetzt werden. Ich habe mich für letztere Variante entschieden, da keine Anpassungen am Server durchgeführt werden müssen oder Inkompatibilitäten beim Client zu befürchten sind. Damit das Resultat sofort nach dem Speichern in der lokalen Umgebung getestet werden kann, habe ich den LESS Compiler unter Eclipse als Builder eingebunden.

Zunächst muss der LESS Compiler heruntergeladen und nach c:\Programme (x86)\LESS entpackt werden. Danach wird ein Ant Script namens build.xml auf oberster Ebene des Webprojektes mit folgendem Inhalt angelegt:

<?xml version="1.0" encoding="UTF-8"?>
<project default="build">
	<target name="build">
		<exec dir="." executable="cmd">
			<arg line="/c" />
			<arg value="C:\Program Files (x86)\LESS\lessc.cmd" />
			<arg value="style.less" />
			<arg value="style.css" />
			<arg value="-compress" />
		</exec>
	</target>
</project>

Dieses Ant Script wird die Datei style.less in style.css übersetzen und gleichzeitig komprimieren. Die Pfadangaben müssen entsprechend angepasst werden und beziehen sich relativ auf das Verzeichnis des Projektes. Bevor das Script als Builder eingerichtet wird, sollte die benötigte LESS Datei bereits angelegt sein.

Das Ant Script wird nun als Builder in Eclipse eingerichtet. Öffne dazu die Projekteinstellungen und wähle den Menüpunkt Builders. Klicke dort auf New und wähle im folgenden Dialog den Menüpunkt Ant Builder. Beim Tabreiter Main wählst du nun unter Buildfile → Browse Workspace… das eben erstellte Ant Script aus. Unter Base Directory hingegen wird das Projektverzeichnis ausgewählt.

Danach wird zum Tabreiter Target gewechselt. Hier kann eingestellt werden, in welchen Fällen das Ant Script ausgeführt werden soll.

Zunächst klickst du bei Auto Build auf Set Targets… und aktivierst build [default]. Bei allen anderen Einträgen sollte das Target deaktiviert werden, indem das Häckchen einfach deaktiviert wird.

Damit das Script nicht bei jeder Änderung im Projektverzeichnis ausgeführt wird, sondern nur, wenn Änderungen an der LESS Datei erfolgen, wird nun zum Tabreiter Build Options gewechselt. Dort wird der Eintrag Specify working set  of relevant resources aktiviert und auf Specify Resources… geklickt.

Dort wird nun die LESS Datei ausgewählt und mit Finish bestätigt.

Wenn alles glatt läuft sollte beim Speichern der LESS Datei folgende Konsolenausgabe erfolgen:

Das Ganze hat noch einen weiteren Vorteil. Sollte sich ein Fehler in den LESS Quellcode einschleichen, wird der LESS Compiler sofort beim Speichern darauf hinweisen:

Hinterlasse einen Kommentar