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

Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...
CSS Grids lernen mit Grid Garden Es ist ja noch gar nicht so lange her das ich über Flexbox Froggy berichtet habe. Mit dem Spiel kann man einfach und schnell den Umgang mit Flexboxen ...
JavaScript & Canvas anstatt Visio Das Canvas-Element kann schön zeichnen und die Entwicklung geht klar vom Desktop weg hin zur Cloud, was dann fehlt sind die entsprechenden Lösungen. N...
Truncating von Text mit HTML Markup Manchmal sind es die einfachen Dinge im Leben, die einen Webworker in den Wahnsinn treiben. Alles beginnt mit einem Anruf: der Kunde möchte die ersten...

2 Kommentare

Schreibe einen Kommentar