LESS mit Netbeans automatisiert kompilieren

Letzte Aktualisierung : |  

In einem Tutorial hatte ich gezeigt wie man in Netbeans GruntJS integrieren kann und so LESS, SASS oder auch JavaScript Dateien minimieren kann so wie man Module in Grunt dafür nutzt. Netbeans bietet aber für LESS und SASS (CSS Preprocessors) an, es macht natürlich kein Sinn wenn du bereits mit Grunt minimierst. Jedoch braucht man nicht für jedes Projekt JavaScript Dateien und dann würde es wieder Sinn machen.



Was benötigen wir?

Also es ist nicht viel erforderlich um Less in Netbeans zu aktivieren und zu nutzen. Als erstes benötigen wir den Node Package Manager, lade und installiere auch Node.js auf Deinem System:
 Node JS




Less installieren und in NetBeans integrieren

Wurde Node.js installiert können wir nun mit npm Less Lokal oder auch Global hinzufügen, in unserem fall Global, weil wir es in jedem Projekt nutzen wollen. Also öffnen wir unser Terminal und geben folgendes ein.

 LESS
 LESS Plugin - Clean CSS | GitHub
USERNAME$ sudo npm install -g less

Hier noch ein Plugin falls Du möchtest um das CSS zu bereinigen beim kompilieren von LESS zu CSS.

USERNAME$ sudo npm install -g less-plugin-clean-css

Das sudo verwenden wir um es als Admin auszuführen bzw. der User der in der sudoers liste steht kann es ausführen. Ansonsten kann es passieren das Du nicht genug rechte hast und es wird ein Fehler ausgegeben, gleichzeitig wurde auch nichts installiert. Nachdem wir Less global installiert haben, bekommen wir Informationen zu unserer Installation.

/usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
+ less@3.9.0
added 13 packages from 34 contributors, removed 27 packages and updated 35 packages in 4.276s

Bei dieser Ausgabe können wir gut sehen wo sich Less befindet und gleich auch für NetBeans nutzen. Dafür öffnen wir NetBeans und gehen unter Preferences -> HTML/JS -> CSS Preprocessors zu LESS Path dort müssen wir unseren LESS Dateipfad hinzufügen, hier spielt jedoch keine rolle welchen, weil der eine ein Symlink ist zu der eigentlichen ausführbaren bin zeigt.

Integrate LESS in NetBeans/usr/local/bin/lessc

So nun haben wir auch Less in NetBeans integriert und wir können anfangen es zu nutzen.



LESS im Projekt einsetzen

NetBeans LESS Einstellungen

Wenn wir ein Projekt angelegt haben, öffnen wir die Projekt Eigenschaften um unsere CSS Preprozessoren einzustellen. Haben wir den Pfad so wie unsere plugin Optionen eingetragen (in diesem Fall clean css) speichern wir.

NetBeans LESS Projekt

Oben im Bild kannst Du sehen das ich nicht direkt den less Ordner ausgewählt habe um so nicht alle Dateien in dem Ordner umzuwandeln sondern nur die die ich möchte.

NetBeans LESS Projekt

So würde dann meine Projektstruktur aussehen und alles was in unserem app/ Ordner sich befindet und Importiert wird in CSS kompiliert.

Dein Kommentar

* Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
Du kannst diese Tags verwenden: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
?

Dieses Feld ist optional
Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
tnado SEO & AMP CMS © 2019 | Alle Rechte Vorbehalten
Created with tnado SEO CMS