Das Wunder des Live Reloads

Screenshot von LiveReload auf dem Mac

Ich zeige mich ja selten begeistert von Neuerungen muss ich sagen, ich könnte durchaus noch mit dem Notepad entwickeln wenn ich es wollte. Nach wochenlanger Quälerei (und das meine ich genau so) habe ich mich aber dermassen an PHPStorm gewöhnt, das ich einen anderen Editor nicht mehr in Betracht ziehe. Was aber wirklich zu einer der nervigsten Sachen der Web-Entwicklung gehört, ist die F5-Taste bzw. der permanente Reload von Seiten in Browsern beim Entwickeln.

Screenshot von LiveReload auf dem Mac

Gerade bei der Entwicklung von CSS ist die Sache mit dem Tab und dem F5 durchaus nervig. Benutzt man SASS hat man unter Umständen sogar einen Schritt mehr. Einer meiner Lieblings-Anwendungen der letzten Monate ist LiveReload geworden, das für den Mac und den PC verfügbar ist. Ganz einfach ausgedrückt leistet der kleine Helfer folgendes: Mittels einer Monitoring-Funktion überwacht es Dateien in frei definierbaren Verzeichnissen, sollte sich eine Datei ändern wird im Browser automatisch ein Reload ausgeführt.

Der Reload an sich kann dabei auf 2 Wegen erfolgen: a) man fügt ein kleines Stück JavaScript in den Head der betreffenden Seite ein, oder b) man installiert eine Browser Extension. Letzteres ist mein präferierter Weg. LiveReload kann allerdings noch ein bisschen mehr: Es kann bei einem Monitoring auch auf die üblichen Verdächtigen angesetzt werden (SASS, LESS, Stylus, CoffeeScript, …) und diese bei einer Änderung automatisch compilieren. Ferner kann nach eventuell vorhandenen Änderungen ein frei definierbares Kommando ausgeführt werden. Simple Idee, gut umgesetzt, und es erspart TONNEN an Zeit und entlastet durchaus die Taste F5! ;)

Ähnliche Beiträge

CSS Grundgerüst automatisch erstellen lassen Der erste Wurf eines Templates ist recht nervig. Ich weiss nicht wie ihr vorgeht, aber ich beginne erst einmal damit die komplette Struktur in HTML au...
LimeJS – HTML5 Spiele Framework Darüber das HTLM5 der Weg in die Zukunft ist, und nicht Flash, lasse ich mich heute mal nicht aus (dann haut ihr mich wieder!:) Aber es ist schön anzu...
Lint für CSS Und noch ein Lint! Über das für jQuery habe ich ja bereits berichtet, nun gibt es das Ganze auch für CSS als Webapp mit dem Namen CSS Lint. Frei nach ...
Linkcheck mit CSS3 Bei der HTML-Umsetzung eines Designs werden in der Regel alle Links entweder gar nicht, oder mit einem # versehen. Dies liegt in der Regel daran, das ...

2 Kommentare

Schreibe einen Kommentar