nodejs LESS compiler für OXID Themes

Mit dem neuen Flow Theme von OXID haben wir nun endlich auch LESS Stylesheets, dank denen man mit wenig Aufwand den Shop z.B. farblich komplett umgestalten kann.
Die beigefügten Scripts zum Kompilieren dieser LESS Dateien benötigen jedoch einige, sonst komplett unnütze Programme, die man erst installieren und verstehen muss.

LESS ganz einfach automatisch kompilieren

Es geht aber auch einfacher und voll automatisch. Wie? Das erkläre ich jetzt.
Zunächst ein mal wird Node JS benötigt, genau so wie bei den mitgelieferten Scripts.
Nicht mehr benötigt werden Grunt, all seine Extras, Zusatzfunktionen und natürlich die Einarbeitungszeit.

Installation:

  1. Lade less.js und package.json von hier herunter: https://github.com/vanilla-thunder/nodejs-less-compiler/
  2. Lade diese beiden Dateien in den out/ Ordner in deinen Shop hoch
  3. Node JS Compiler installieren: Falls dein Shop mit git/svn versioniert wird, musst du eine Ausnahme für out/node_modules/ hinzufügen

LESS Datei vorbereiten

Du kannst entweder flow.less aus dem Ordner application/views/flow/build/less/ kopieren oder eine neue Datei erstellen und flow.less importieren.
Diese Zeile reicht schon völlig aus:

Der Pfad zu den Schriftarten von fontaweseome muss ebenfalls angepasst werden:

Konfiguration:

In less.js findest du in den zeilen 9-14 folgende Konfigurationparameter:

  • $theme: Name deines child Themes oder auch „flow“, falls du direkt an flow arbeitest
  • $vendor: relativer Pfad zu den less Dateien im Flow. Müsste so stimmen.
  • $watch: relativer Pfad zum Ordner mit deinen less Dateien. Dieser Ordner wird überwacht und bei Änderungen automatisch neu kompiliert.
  • $source: deine less Haupt-Datei.
  • $target: die Ausgabedatei
  • $sourcemap: SourceMap einbinden? (nur für live Betrieb abschalten!)
  • $minify: soll die css Ausgabe minimiert werden? (nur für live Betrieb nötig)

Nutzung:

Den Script startest du so:

Dann sollte in der Shell Console sowas auftauchen:

Das wars schon, ab jetzt werden Änderungen an Dateien im out/pow3r/src/less/ Ordner automatisch erkannt und die Datei styles.less kompiliert.
In diesem Beispiel habe ich ein Child Theme „pow3r“ auf Basis von flow.

By | 2016-10-16T18:07:24+00:00 September 15th, 2016|Categories: Tutorials|Tags: , , |0 Comments