Browser Sync ist ein Tool, mit dem Sie Codeänderungen zwischen verschiedenen Browsern und Geräten in Echtzeit synchronisieren können. Es ist ein unverzichtbarer Helfer für Webentwickler, der es ihnen ermöglicht, den Test- und Debugprozess ihrer Webanwendungen zu beschleunigen und zu vereinfachen. In diesem ausführlichen Tutorial erfahren Sie, wie Sie Browser Sync für Anfänger einrichten.
Der erste Schritt zum Einrichten von Browser Sync besteht darin, es auf Ihrem System zu installieren. Sie können es mit NPM oder Yarn installieren. Führen Sie einfach den Befehl im Terminal aus:
$ npm install -g browser-sync
Nach der Installation müssen Sie in Ihr Projektverzeichnis gehen und Browser Sync mit dem folgenden Befehl ausführen:
$ browser-sync start --server --files "css/*.css, *.html"
Dieser Befehl startet den Browser Sync-Server und ermöglicht es ihm, Änderungen an Ihrem CSS-Code und Ihren HTML-Dateien zu verfolgen. Sie können die Liste der zu verfolgenden Dateien anpassen, indem Sie sie im Parameter angeben --files durch Kommas getrennt.
Jetzt, da Browser Sync gestartet wurde, können Sie Ihren Webbrowser öffnen und zu einer Adresse navigieren http://localhost:3000 um Ihr Projekt anzuzeigen. Wenn Sie Änderungen an Ihrem Code vornehmen, wird Browser Sync die Webseite automatisch aktualisieren und Sie davon abhalten, die Seite manuell zu aktualisieren.
Vorbereiten der Konfiguration von browser sync
Bevor Sie mit der Konfiguration von browser sync beginnen, müssen Sie sicherstellen, dass Node bereits installiert ist.js auf Ihrem Computer. Wenn Node.js ist nicht installiert, Sie müssen es von der offiziellen Website herunterladen und installieren.
Nach der Installation von Node.js Sie können browser sync mit dem NPM-Paketmanager (Node Package Manager) installieren. Öffnen Sie eine Eingabeaufforderung oder ein Terminal und geben Sie den folgenden Befehl ein:
npm install -g browser-sync
Dieser Befehl installiert browser sync global auf Ihrem Computer, sodass Sie ihn in einem beliebigen Ordner oder Projekt verwenden können.
Nachdem Sie browser sync installiert haben, können Sie mit der Einrichtung Ihres Projekts beginnen. Sie müssen eine Datei erstellen bs-config.js im Stammordner Ihres Projekts. In dieser Datei können Sie Einstellungen für Browser Sync festlegen, z. B. den Port, der für den Proxy verwendet werden soll, die Dateien, die überwacht werden sollen, usw.
Nach dem Erstellen der bs-config-Datei.js Sie können browser sync mit dem Befehl ausführen:
browser-sync start --config bs-config.js
Browser sync wird gestartet und Sie erhalten eine URL, die Sie im Browser öffnen können. Wenn Sie Dateien in einem Projekt ändern, wird die Seite von browser sync automatisch aktualisiert.
Jetzt können Sie browser sync verwenden und für Ihr Projekt konfigurieren. Gute Arbeit!
Schritt 1: Installieren Sie den Node.js
Um Node zu installieren.führen Sie auf Ihrem Computer die folgenden Schritte aus:
- Gehen Sie zur offiziellen Website von Node.js.
- Laden Sie die Node-Installationsdatei herunter.js für Ihr Betriebssystem (Windows, macOS oder Linux).
- Führen Sie die Installationsdatei aus, und folgen Sie den Anweisungen des Installationsassistenten.
- Nach erfolgreicher Installation können Sie Node verwenden.js in der Befehlszeile (Terminal).
Überprüfen Sie den Node.js ist korrekt installiert, indem der folgende Befehl an der Eingabeaufforderung (Terminal) ausgeführt wird:
Wenn Sie die Node-Version sehen.js bedeutet, dass die Installation erfolgreich war.
Schritt 2: Installieren von browser sync
Bevor Sie mit der Verwendung von browser sync beginnen, müssen Sie es auf Ihrem Computer installieren. Sie müssen es mit dem npm-Paketmanager (Node Package Manager) installieren.
Die Installation von browser sync erfolgt mit folgendem Befehl:
npm install -g browser-sync
Mit diesem Befehl wird browser sync global auf Ihrem Computer installiert, sodass Sie ihn in jedem Projekt über die Befehlszeile verwenden können.
Nach erfolgreicher Installation können Sie die Browser Sync-Version überprüfen, indem Sie den Befehl eingeben:
Wenn die Version ohne Fehler angezeigt wird, ist browser sync erfolgreich installiert und kann verwendet werden.
Schritt 3: Erstellen einer Konfigurationsdatei
So konfigurieren Sie browser sync sie müssen eine Konfigurationsdatei erstellen bs-config.js. Mit dieser Datei können Sie die Einstellungen und das Verhalten des Live-Servers bestimmen.
In der Konfigurationsdatei können wir viele Optionen angeben, wie zum Beispiel:
| Option | Die Beschreibung |
|---|---|
| server | Gibt den Pfad zum Stammverzeichnis Ihres Projekts an |
| proxy | Ermöglicht die Verbindung von browser sync mit einem bereits ausgeführten lokalen Server |
| port | Gibt den Port an, auf dem der Live-Server ausgeführt wird |
| files | Ein Array von Dateien, die Sie überwachen und die Seite automatisch aktualisieren möchten, wenn Sie sie ändern |
| notify | Aktiviert oder deaktiviert Benachrichtigungen zum Neuladen einer Seite |
Ein Beispiel für eine einfache bs-config-Konfigurationsdatei.js:
module.exports = ,port: 3000,files: ["*.html", "css/*.css", "js/*.js"],notify: false>;
Nachdem Sie die Konfigurationsdatei erstellt haben, speichern Sie sie im Stammverzeichnis Ihres Projekts.
