Veröffentlicht von Das unter iMac Web Developer beliebte Tool LiveReload , das zum schnelleren Preview beim Programmieren, besonders im Multi-Monitorbetrieb geeignet, dient.
Leider ist dieses Programm noch nicht für Windows erschienen, es gibt aber ein Ruby Gem namens Guard::LiveReload das exakt dasselbe macht – mehr dazu später.
Prolog:
Man entwickelt eine Webseite mit XHTML, HTML5, CSS2/3, JavaScript, jQuery, PHP, ASP, Java oder womit auch immer und gerade beim Bugfixen oder Layouten muss man ständig speichern, in den Browser wechseln, reload klicken um die Änderungen zu sichten.
Hier greift LiveReload unter die Arme, denn es ist ein lokales Programm das die Änderungen in der Ordnerstruktur überwacht und bei Änderungen den Browser automatisch reloaded. Dies ist ganz einfach, denn es muss in die bestehenden Seiten lediglich eine Zeile Javascript eingefügt werden das bei geänderten Dateien einen Reload anstößt. Alternativ gibt es für Chrome ein Plugin das einem sogar das integrieren des JS Codes erspart und man mit einem Klick die gerade geöffnete Webseite in den Überwachung aufnimmt.
Sehr rasant! Am zweiten Monitor die Preview im Browser öffnen, am Hauptmonitor fleißig Programmieren .. STRG+S (speichern) und schon sieht man am zweiten Monitor das Ergebnis!
Guard::LiveReload Installation unter Windows 7 32bit
Hier reicht die kurze Anleitung von der Guard::LiveReload Website.
Eventuell kann man noch die gems unter Punkt 4 (win32console + rb-notifu) installieren wenn man möchte.
Anschließend noch das Browserplugin für Chrome/Safari installieren.
Guard::LiveReload Installation unter Windows 7 64bit
Warum eine Installationsanleitung extra für Windows 7 64bit? > weil es hier tückisch werden kann, da nicht alle dafür benötigten Module auf dem normalen Wege automatisch korrekt installiert werden.
Also man kanns mal probieren mit der obigen Anleitung, sollte es nicht funktionieren, dann eben hier weiter (ist nämlich deutlich aufwändiger)
1. Ruby für Windows
Rubyinstaller Website aufrufen, downloaden, installieren.
Haken bei PATH setzen.
2. Ruby Development Kit installieren
Die Installationsdateien sind ebenfalls auf der oben angeführten rubyinstaller Seite zu finden.
Downloaden, anschließend DevKit Installationsanleitung folgen.
[shell]guard initguard start
[/shell] .. nicht vergessen!
3. Für Guard::LiveReload benötigte Module installieren
em-websockets und eventmachine (ab version 1.20) wird benötigt, also ab in die Kommandozeile (WIN+R drücken, bzw. Start > ausführen, oder wenn ausführen nicht vorhanden, dann Start > Programme durchsuchen > cmd eingeben)
[shell]gem install em-websocketgem install eventmachine –pre
gem ‚em-websocket‘
gem ‚eventmachine‘
[/shell]
Das –pre bei eventmachine installiert die aktuellste Version, ohne würde ruby beim Installieren von eventmachine einen Fehler produzieren und abbrechen.
4. Guard installieren
Damit unter Windows die Orderänderungen erkannt und das Programm benachrichtigt werden kann, wird die Directory Change Notification benötigt, die unter ruby mittels rb-fchange bereitgestellt wird.
[shell]gem install rb-fchange
gem ‚rb-fchange'[/shell]
Für bunte Ausgabe in der Kommandozeile bzw ruby-console gibts das gem win32console:
[shell]gem install win32console
gem ‚win32console'[/shell]
Für visual notification support das rb-notifu gem installieren:
[shell]gem install rb-notifu
gem ‚rb-notifu'[/shell]
5. Guard::LiveReload installieren
[shell]gem install guard-livereloadgem install livereload[/shell] Anschließend die Definitinen im Guardfile initialisieren:
[shell]guard init livereload[/shell]
Sämtlichen Kommandozeilenoptionen findest du in der Guard::LiveReload Documentation.
6. Browserplugin
[quote style=“boxed“] Chrome/Safari Browserplugin für Guard::LiveReload[/quote]7. Starten des livereloads
Eine CMD/command shell öffnen, in den zu überwachenden Ordner wechseln und mit folgendem Befehl starten:
[shell]livereload[/shell]
Anschließend im Browser die Seite öffnen und den LR Button aktivieren.
Die Ausgabe sieht bei mir so aus:
[shell]
X:externlivereload
Version: 1.6 (compatible with browser extension versions 1.6.x)
Port: 35729
Watching: X:/extern
– extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
– live refreshing disabled for .js: will reload the whole page when .js is cha
nged
– excluding changes in: */.git/* */.svn/* */.hg/*
– with a grace period of 0.05 sec after each change
LiveReload is waiting for browser to connect.
Browser connected. // nach dem Starten des Browserplugins
Modified: index.php // kommt beim speichern,gleichzeitig wird der Browser neugeladen
[/shell]