Browsersync.io – Nie wieder den Browser nachladen, wenn man mit CSS/SASS/HTML/JS arbeitet

Was ist Browsersync.io

Browsersync.io ist ein Modul für den NPM Paketemanager und nimmt euch das Neuladen der Website ab, wenn Ihre eine Änderung im Quellcode abspeichert. Ändert ihr zum Beispiel in HTML eine <h2> in eine <h3> dann müsst Ihr nicht mehr manuell den Browser neu laden. Dies übernimmt Browsersync ab sofort für euch. Ist das nicht fantastisch? Am ende dieses Artikels, sollte ein Bulid stehen, mit welchen Ihr schnell und komfortabel eine einfache Website aufbauen könnt und dieses Bulid leicht erweitern könnt.

Was ist Node.JS und wofür brauch ich es?

Ich habe bereits einen kurzen Artikel dazu veröffentlicht. Ich habe Ihn „NodeJS kurz und knapp vorgestellt“ genannt. Bitte schaut da mal rein. Also installiert Node.JS von https://nodejs.org auf euren lokalen System. Hab ihr dies getan, kommen wir zur Einrichtung und Installation.

Installation und Einrichtung von Browsersync.io

Erstellt einen Ordner für dieses Beispielprojekt. Sinnvoll ist so was wie „Browser-Live-Load-Template“. Um mit Browsersync arbeiten zu können, benötigt ihr noch Gulp. Gulp ist ein Taskrunner/Manager. Er vereinfacht vieles. Öffnet eine Konsole mit Admin-Rechten in Windows oder Mac. Navigiert zu euren eben erstellten Projekt-Ordner mit zB.
cd Projekte\Browser-Live-Load-Template\.

Gebt nun den Befehl für das Installieren von Gulp und Browsersync ein:

npm init dann

npm install browser-sync gulp -g

und noch mal lokal in euren Projekt mit:

npm install browser-sync gulp --save-dev

Unter MAC kann es sein, dass Ihr als Sudo, Gulp installieren müsst. Das --save-dev sorgt dafür, dass die benötigten Dateien im euren Projekte-Ordner integriert werden.
Nachdem ihr Gulp und Browsersync erfolgreich auf euren System installiert habt. Müsste ein neuer Ordner in euren Projekt erstellt wurden sein. Den node_modules Ordner solltet Ihr nun sehen können. Darin sind alle mit dem Projekt verknüpften und installierten Module abgelegt.

Nun folgt die Einrichtung des Ganzen mittels einer gulpfile.js. Erstellt folgende Dateien im Ordner eures Projekts: index.html, sytles.css, gulpfile.js. Öffnet die index.html und legt ein einfaches Gerüst an.

index.html

In die gulpfile kommen die Befehle zu Browsersync und anderen Modulen. Das sieht dann so wie unten aus. Ausführliche Erklärungen verlinke ich am Ende des Artikels.

gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

// Save a reference to the `reload` method

// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("*.html").on("change", reload);
});

Ok, nun aber zurück zu Browsersync. Gebt Folgendes ein die Konsole ein:

gulp serve

Windows fragt euch, ob NodeJS Zugriff auf euren Browser bekommen darf. Bestätigt mit ja. Nun solltet Ihr eure index.html im Browser sehen. Ändert etwas in der index.html und speichert es. Es sollte nun sofort eine Änderung im Browser zu sehen sein. Ganz ohne manuellen Reload. Its Magic!

Es gibt noch eine Weboberfläche, wenn Browsersync über den gulp-Befehl gestartet werden. Die Adresse dazu wird euch in der Konsole angezeigt. Bei mir lautet dies: UI: http://localhost:3003

Beendet wird der Gulp-Task mit strg+c und j zum Bestätigen unter Windows.

Links und Quellen:

Schreibe einen Kommentar

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