search

PhysikOnline-FFM / PO5.1-Skin

Skin for our ILIAS installation at https://elearning.physik.uni-frankfurt.de
MIT License
0 stars 0 forks source link

On-the-fly LESS compilation #1

Open Philip-A opened 8 years ago

Philip-A commented 8 years ago

Im alten Skin PO3 wurde der Less code im Fall von Änderungen der Less-Dateien automatisch beim nächsten Seitenaufruf neu kompiliert und gecached bis wieder eine Änderung registriert wurde.

Mit dem Less Code der Entweder von ILIAS (delos.less) oder vom Skin der Freiburger verwendet wird (evtl. auch ein problem mit neuem Bootstrap, wie wir es früher schon mal bei anderem Projekt hatten) funktioniert es mit der alten PHP-Libary für LESS-Kompilierung nicht mehr. PHP-Einstiegsdatei: ./physik.css.php.old

Meine schnelle Lösung war es, die Kompilierung manuell auf der Konsole anzustoßen. Um weniger tippen zu müssen habe ich das dreizeilige Shell-Skript gespeichert (./compile-less.sh) Das funktioniert erstmal problemlos und kann evtl. sogar als Dauerlösung verwendet werden, da sich am Skin ja nicht mehr viel ändert, wenn er einmal fertig ist.

Alternativ müsste eine neue Lib gesucht werden, die wie die frühere im PHP Skript verwendet werden kann, um die Styles zu schreiben.

svenk commented 8 years ago

Wo verbirgt sich denn der Freiburger LESS-Code? Das physik.css.php hat ja zum Checken der Validität des Caches die mtime von allen Files im Verzeichnis less.d und css.d überprüft. Wie der Kommentar im Code erwähnt, sind die lokalen Pfade für den LESS-Compiler auch wichtig, das war einiges an Gefummel das hinzukriegen:

$less_import_dir = array(
     // Customizing ist relativ dazu 
    "/home/elearning-www/public_html/elearning/local/",
    "css.d/",
    "less.d/",
     );

Verzeichnisunabhängig ginge wohl auch sowas wie

$less_import_dir = array(
     // Customizing ist relativ dazu 
     dirname(__FILE__) . '/../../' , // o.ä. bis zum "Customizing"-Rootverzeichnis
    "css.d/",
    "less.d/",
     );

oder man ändert die @import ("Customizing/.../file.less") zu etwas weniger abenteuerlichen wie @import("file.less").

Zur Entwicklung von LESS-basiertem Design finde ich es aber ohnehin am praktischsten, less.js zum client-side-compilen zu verwenden, http://lesscss.org/#client-side-usage - das ist zwar etwas langsamer beim Laden, aber man muss nicht immer wieder neukompilieren bei kleinen Änderungen.