LESS zu CSS-Dateien automatisch mit Netbeans kompilieren

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.

nodejs_1

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.

npm_less

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:

netbeans_lessc

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:

netbeans_less_project_1

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:

netbeans_less_project_2

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:

netbeans_less_project_3

In den Einstellungen navigieren wir zum CSS Preprocessor für LESS:

netbeans_less_project_4

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:

netbeans_less_project_5

Die Beispieldateien sind wieder unter Github zu finden.