Grunt: LiveReload reloaded

Eines der angenehmsten Features meines Build-Tools ist LiveReload – wenn der watch-Task im Hintergrund läuft, wird bei jeder Änderung an den überwachten Dateien (HTML, JS, SCSS) die im Browser geöffnete Seite auf dem vom Build-Tool gestarteten lokalen Webserver automagisch neu geladen. Man spart sich also das ständige manuelle neu laden der Seite im Browser.

Das Ganze gibt es natürlich auch als App mit Browser-Extensions, aber ich finde es bequemer, diese Funktionalität direkt im Build-Tool zu haben.

Nun sind aber die beiden dazu benötigten Grunt-Plugins – grunt-contrib-livereload und grunt-regarde – neuerdings “deprecated”, also überholt, da grunt-contrib-watch diese Funktion nun übernehmen kann. Das hört sich ganz simpel an, ist aber leider etwas frickelig einzurichten und dazu (für mein Verständnis zumindest) leider nicht besonders verständlich dokumentiert.

(Für die Ungeduldigen dokumentiert dieser Commit in meiner Projekt-Vorlage alle nötigen Änderungen in einem Diff.)

Zwei Plugins raus, zwei Plugins rein

Die beiden „veralteten“ Plugins fliegen also raus; neben grunt-contrib-watch braucht man zudem noch eine Middleware wie connect-livereload, sofern man nicht eine der anderen Methoden verwenden möchte, um LiveReload auszulösen.

Ich finde sowohl das zusätzliche Script-Element als auch die Browser-Extensions irgendwie unpraktisch – das Script-Element müsste man beim Deployment entfernen (was man aber mit Grunt automatisieren könnte), die Browser-Extensions müsste man in allen Browsern installieren und einrichten.

Konkret entfernt man die beiden Plugins aus der package.json und fügt die neuen hinzu, gleiches passiert im grunt.loadNpmTasks-Abschnitt der Gruntfile.js. (Siehe Diff; erneutes npm install nicht vergessen.)

Neu konfigurieren

Die notwendigen Änderungen in der Gruntfile.js sind auf den ersten Blick gar nicht kompliziert – die alte Middleware fliegt komplett raus, den (in meinem Beispiel) default-Task kann man einfach auf 'connect', 'watch' ändern. Die Konfiguration des watch-Tasks kann man im Prinzip beibehalten, muss jedoch zusätzlich die Option livereload: true setzen und sollte für jeden Untertask nospawn: true setzen.

Der etwas kniffelige Teil ist Einbindung des Middleware in den connect-Task:

connect: {
    livereload: {
        options: {
            port: 9001,
            middleware: function(connect, options) {
                return[
                    require('connect-livereload')(),
                    connect.static(options.base),
                    connect.directory(options.base)
                ]
            }
        }
    }
},

Das, was dabei – mich zumindest – verwirrt, ist die Dokumentation von connect-livereload, die kein wirklich passendes Beispiel zur Einbindung der Middleware in grunt-contrib-connect enthält – das findet man dort in der Dokumentation und muss nur noch die entscheidende Zeile aus dem dortigen Grunt-Beispiel ergänzen. Wichtig sind vor allem die beiden folgenden Zeilen, die erst dafür sorgen, dass der lokal laufende Webserver überhaupt statische Dateien ausliefert.

Es ist also wie so oft – es ist alles dokumentiert, man muss nur wissen, wo. Und: Grunt nimmt einem nur so lange Arbeit ab, wie man nicht daran rumfummelt …