Ubuntu Web-Entwicklung: Den Browser ereignisgesteuert aktualisieren mit LiveReload und Guard (Bonus: Compass/Sass-Integration)

Die Möglichkeiten, mit denen man das lästige Aktualisieren des Browser-Fensters bei der Web-Entwicklung erträglich machen kann, hatte ich im letzten Artikel vorgestellt. In diesem Beitrag möchte ich auf die smarteste Möglichkeit – die Ereignissteuerung mit Guard und Guard::LiveReload – etwas näher eingehen bzw. zeigen, wie ich die ereignisgesteuerte Aktualisierung im Web-Browser unter Ubuntu-Linux verwende.

1. Was ist was?

Eine kurze Erklärung, womit wir es hier zu tun haben, kann nicht schaden:

Browser auto refresh
image-309

Mit Guard kann man Ereignisse steuern, die durch Modifikationen im Dateisystem herbeigeführt werden.

„Guard is a command line tool to easily handle events on file system modifications.“

Dabei kann Guard::LiveReload (LiveReload) so ein „Ereignis“ sein. Wenn Guard eine Modifikation in einer Datei feststellt, dann startet es LiveReload.

„Guard::LiveReload automatically reload your browser when ‚view‘ files are modified.“

Die LiveReload-Erweiterung sorgt letztendlich dafür, dass LiveReload den Browser aktualisieren kann.

Übrigens kann man die Ereignissteuerung mit Guard und LiveReload auch mit anderen Linux-Distros und sonstigen Betriebssystemen nutzen. ;-)

2. Das Prinzip

Im alltäglichen Arbeitsprozess geht die ereignisgesteuerte Aktualisierung so: Man startet Guard in der Kommandozeile. Guard überwacht nun die Aktivitäten eines festgelegten Verzeichnisses (inkl. Unterverzeichnissen…) des Computers. Wenn man in diesem Verzeichnis eine Datei abspeichert, wird das von Guard erkannt. Guard führt dann die vorgegebenen Aktionen aus – in unserem Fall den Start der Aktualisierung des Web-Browsers durch LiveReload. Das LiveReload-Script sorgt schließlich mit Hilfe einer im Browser installierten LiveReload-Erweiterung für die eigentliche Aktualisierung des Browser-Fensters.

3. Vorbereitung

Um Guard und LiveReload zu nutzen muss folgendes auf dem lokalen Entwicklungs-PC installiert werden:

Die Installationen sind schnell erledigt und auf den Seiten ausreichend erklärt. Das hab selbst ich auf Anhieb hin bekommen. ;-)

4. Konfiguration

Die o.g. Vorbereitung führt man einmalig auf seinem Rechner aus. Aber die folgende Konfiguration muss man für jedes neue Projekt einrichten. Keine Bange, die Konfiguration ist schnell erledigt und der kleine Aufwand lohnt auf alle Fälle.

Was muss man also anstellen, damit sich der Browser automatisch aktualisierst, jedes mal, wenn man eine Datei bearbeitet (gespeichert) hat?

  1. Ein Terminal öffnen.
  2. In das Verzeichnis wechseln, in dem Guard laufen soll.
  3. Ein Gemfile generieren mit: bundle init
  4. Das Gemfile im Editor öffnen und folgendes eintragen:
    [code lang=“ruby“]# ~/Gemfile
    source "http://rubygems.org"

    group :development do
    gem ‚guard-livereload‘
    gem ‚yajl-ruby‘          # Das ist optional.
    end[/code]

  5. Bundler starten mit: bundle
  6. Ein Guardfile generieren mit: guard init
  7. Das Guardfile im Editor öffnen und folgendes eintragen:
    [code lang=“ruby“]guard ‚livereload‘ do
    watch(‚.*\.(css|js|htm|html|php)‘)
    end[/code]

Damit ist die Konfiguration abgeschlossen.

5. Aktualisierung starten

Wir haben die nötige Software installiert und die Konfiguration eingestellt. Nun kann es endlich losgehen:

  1. Ein Terminal öffnen.
  2. In das Verzeichnis wechseln, in dem Guard eingerichtet wurde.
  3. Guard starten mit: guard
  4. Im Browser die gewünschte Seite öffnen.
  5. Die LiveReload-Erweiterung des Browser einschalten.

Ab jetzt wird der Browser automatisch aktualisiert, wenn man eine Datei aus dem Verzeichnis speichert. Die Aktualisierung startet man übrigens immer, wenn man den Rechner neu hochgefahren hat bzw. der Browser gestartet wird. Ich schalte Guard morgens ein und es arbeitet problemlos den ganzen Tag.

Wenn Guard überschaubere Verzeichniss- und Dateimengen wie z.B. bei einem WordPress-Theme überwacht, sollte die Aktualisierung ad hoc geschehen: Kaum hat man im Editor seine Änderungen gespeichert, sieht man auch schon das Resultat im frisch aktualisierten Browser.

Ein Leeren des Browser-Caches ist übrigens nicht nötig.

6. Bonus: Guard für Compass/Sass nutzen

Guard kann man auch für andere nützliche Dinge verwenden. Z.B. kann man zusätzlich zu LiveReload auch noch Compass einbinden, und damit gleich die CSS-Dateien ereignisgesteuert erzeugen. Wenn man dann eine Sass-Datei bearbeitet, regelt Guard die „CSS-isierung“ und anschließend gleich noch den Browser-Refresh in einem Abwasch. Ein Guard für alle Fälle! ;-)

Um Compass in Guard einzubinden, muss man es natürlich erstmal installiert haben. (Das wird hier beschrieben.) Wenn dies geschehen, muss man bei der obigen Konfiguration einfach nur folgendes in die Files schreiben:

Das Gemfile sieht dann so aus:

[code lang=“ruby“]
# ~/Gemfile
source "http://rubygems.org"

group :development do
gem ‚compass‘
gem ‚compass-960-plugin‘
gem ‚compass-validator‘
gem ‚oily_png‘
gem ‚css_parser‘
gem ‚guard-compass‘
gem ‚guard-livereload‘
gem ‚yajl-ruby‘
end
[/code]
Und das Guardfile sieht dann so aus:

[code lang=“ruby“]
guard ‚compass‘ do
watch(‚.*\.s[ac]ss‘)
end

guard ‚livereload‘ do
watch(‚.*\.(css|js|htm|html|php)‘)
end
[/code]
Im Guardfile muss die Anweisung für Compass natürlich VOR der Anweisung für LiveReload kommen, damit die CSS-Dateien generiert werden können, bevor der Browser aktualisiert wird.

Obacht

Die von mir hier vorgestellte Methode für den Einsatz von LiveReload ist nur eine von drei Möglichkeiten. Aber aus meiner Sicht die praktikabelste. Wer sich noch weiter damit beschäftigen möchte, stöbere in der Knowledge Base von LiveReload.

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.