LESS zu CSS-Dateien automatisch mit Netbeans kompilieren
Mit Einführung von Netbeans 7.4 wurde endlich eine Unterstützung von LESS eingeführt. Jetzt die automatische CSS-Erzeugung aktivieren.
Mit Einführung von Netbeans 7.4 wurde endlich eine Unterstützung von LESS eingeführt. Was genau LESS ist und welche Vorteile es bietet, habe ich schon in meinem Artikel: (LESS is more – LESS, CSS und Javascript-Dateien zusammenführen und komprimieren)[artikel/less-is-more-less-css-und-javascript-dateien-zusammenfuehren-und-komprimieren] am Anfang des Jahres geschrieben.
Damit Netbeans unsere LESS-Dateien automatisch zu CSS-Dateien generiert, brauchen wir nur ein paar Handgriffe tätigen. Nachdem der XAMPP (nicht zwingend erforderlich) zum Laufen gebraucht wurde, Netbeans 7.4 installiert wurde, wird als nächstes node.js installiert. Bei der Installation des MSI-Setup brauch nichts weiter beachtet werden.
Als nächstes werden wir LESS mittels dem Paketmanagers npm installieren. Einige werden sich jetzt fragen, wie wir einen Paketmanager unter Windows benutzen? Ganz einfach, mit dem node.js – Setup wurde npm bereits mitinstalliert.
Wir starten die Konsole (Windowstaste + R » cmd » ENTER) und schicken wie auf der LESS-Seite (siehe Server-side usage » Installation) beschriebenen Befehl ab:
npm install -g less
Nach einer kleinen Weile wurde erfolgreich lessc installiert.
Als nächstes starten wir Netbeans und prüfen ob das automatische Script eingebunden wurde. Dies ist zu finden unter Tools » Options » Miscellaneous » CSS Preprocessors:
Wenn der Pfad nicht gesetzt wurde, muss dieser manuell hinzugefügt werden. Dieser befindet sich standardmäßig unter:
C:\Users\[USERNAME]\AppData\Roaming\npm\lessc.cmd
Im nächsten Schritt erstellen wir ein neues Projekt oder passen ein Vorhandenes an. Ich hab dazu mal einen kleines Beispiel zur Visualisierung vorbereitet. Gegeben seih folgende Ordner- und Dateistruktur:
Die HTML-Datei “index.html” weißt folgende Struktur auf:
<!DOCTYPE html>
<html>
<head>
<title>LESS zu CSS-Dateien automatisch mit Netbeans compilieren</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="theme/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>Überschrift</h1>
Jemand musste Josef K. verleumdet haben,
denn ohne dass er etwas Böses getan hätte,
wurde er eines Morgens verhaftet.
»Wie ein Hund!« sagte er, es war,
als sollte die Scham ihn überleben.
<a href="http://www.blindtextgenerator.de/">Quelle: http://www.blindtextgenerator.de/</a>
</div>
</body>
</html>
und die LESS-Datei mit folgendem Inhalt:
@darkWhite: #f4f4f4;
@black: #000;
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.boxStyle {
background: #fff;
.border-radius (10px);
box-shadow: 10px 10px 5px #000;
padding: 10px;
}
body {
background: @darkWhite;
}
#container {
margin: 0 auto;
width: 300px;
height: 300px;
.boxStyle;
h1 {
color: @black;
text-align: center;
}
p {
color: @black;
}
a {
color: #ff9966;
&:hover {
font-weight: bold;
}
}
}
Wenn wir jetzt die Seite im Browser aufrufen ist von einer Formatierung weit und breit nichts zu sehen:
Was natürlich auch logisch ist! Denn es existiert keine “default.css” im Pfad “theme/css”. Daher müssen wir dem CSS Preprocessor für LESS noch die Pfade mitteilen und das automatische Kompilieren beim speichern aktivieren. Dazu klicken wir per Rechtsklick auf das Projekt und danach auf Properties:
In den Einstellungen navigieren wir zum CSS Preprocessor für LESS:
Thats IT! Nach einer Änderung und dem Speichern von der Datei “default.less” wird automatisch die “default.css” im Pfad “theme/css” generiert. Die Generierung erfolgt nicht nur einmal, sondern bei jeder Änderung in der Datei “default.less”. Das Ergebnis sieht am Ende so aus:
Die Beispieldateien sind wieder unter Github zu finden.