Browser Sync ist ein praktisches Tool, mit dem Sie Aktivitäten und Änderungen auf mehreren Browsern und Geräten in Echtzeit synchronisieren können. Dies ist besonders nützlich beim Entwickeln und Debuggen von Webanwendungen, da Sie Änderungen im Code sofort sehen können, ohne die Seite neu zu laden.
In diesem Artikel erfahren Sie, wie Sie Browser Sync unter Windows 10 installieren, um es in Ihren Projekten zu verwenden.
Schritt 1: Installieren von Node.js
Zuerst müssen Sie sicherstellen, dass Node auf dem Computer installiert ist.js. Gehen Sie zur offiziellen Website von Node.js, laden Sie das Installationsprogramm herunter und führen Sie es aus. Befolgen Sie die Anweisungen auf dem Bildschirm für eine erfolgreiche Installation.
Schritt 2: Installieren von Browser Sync
Nach der Installation von Node.js öffnen Sie eine Eingabeaufforderung und geben Sie den folgenden Befehl ein: npm install -g browser-sync. Drücken Sie die Eingabetaste, und warten Sie, bis die Installation abgeschlossen ist.
Schritt 3: Starten von Browser Sync
Nach der Installation von Browser Sync können Sie es in einem beliebigen Ordner mit Ihrem Webprojekt ausführen. Öffnen Sie dazu eine Eingabeaufforderung, navigieren Sie mit dem Befehl zum gewünschten Ordner cd und geben Sie den Befehl ein browser-sync start --server.
Jetzt können Sie Browser Sync verwenden, um Browser und Geräte während der Entwicklung von Webanwendungen unter Windows 10 zu synchronisieren. Gute Arbeit!
Gulp, Browsersync, Gulp-sass und Dragula werden verwendet, aber die Installation von Browsersync und Gulp-sass ist besonders wichtig!
So installieren Sie Browser Sync unter Windows 10
Schritt 1: Installieren Sie den Node.js und npm
Bevor Sie Browser Sync installieren, müssen Sie Node installieren.js und sein npm-Batch-Manager.
- Gehen Sie zur offiziellen Website von Node.js (https://nodejs.org ) und laden Sie die neueste Version für Windows 10 herunter.
- Führen Sie die heruntergeladene Installationsdatei aus und folgen Sie den Anweisungen des Installationsprogramms.
- Öffnen Sie nach erfolgreicher Installation eine Eingabeaufforderung und geben Sie node -v und npm -v ein, um die Versionen von Node zu überprüfen.js bzw. npm.
Schritt 2: Erstellen eines Projekts und Installieren von Gulp und Gulp-sass
Nach der Installation von Node.js und npm Sie können ein neues Projekt erstellen und Gulp und Gulp-sass installieren.
- Erstellen Sie einen neuen Ordner für Ihr Projekt.
- Öffnen Sie eine Eingabeaufforderung, und navigieren Sie mit dem Befehl cd Pfad zu Ordner zu dem erstellten Ordner.
- Geben Sie den Befehl npm init ein und folgen Sie den Anweisungen, um die package-Datei zu erstellen.json.
- Installieren Sie Gulp und Gulp-sass, indem Sie den Befehl npm install gulp gulp-sass --save-dev eingeben.
Schritt 3: Installieren von Browser Sync
Nachdem Sie das Projekt bereits installiert haben und Gulp und Gulp-sass installiert haben, können Sie Browser Sync installieren.
- Geben Sie den Befehl npm install browser-sync --save-dev ein, um Browser Sync zu installieren.
- Nach erfolgreicher Installation können Sie Ihrer gulpfile den folgenden Code hinzufügen.js:
var gulp = require('gulp');var browserSync = require('browser-sync').create();gulp.task('serve', function() );gulp.watch('*.html').on('change', browserSync.reload);gulp.watch('scss/*.scss', gulp.series('sass'));>);gulp.task('sass', function () );gulp.task('default', gulp.series('sass', 'serve')); Jetzt können Sie Browser Sync starten, indem Sie den Befehl Schluck an der Eingabeaufforderung eingeben. Schluck kompiliert Ihre Sass-Dateien in CSS und startet den Browser Sync-Server.
Sie können Browser Sync auch so konfigurieren, dass sie mit Ihrem Projekt arbeiten - ändern Sie die Serveradresse, konfigurieren Sie sie so, dass der Browser automatisch geöffnet wird, und vieles mehr. Weitere Informationen finden Sie in der Browser Sync-Dokumentation (https://browsersync.io/docs ). Sie haben jetzt Browser Sync für Ihr Projekt unter Windows 10 installiert und funktioniert!
Detaillierte Anleitung
Folgen Sie den folgenden Schritten, um Browser Sync unter Windows 10 zu installieren:
- Öffnen Sie die Eingabeaufforderung, indem Sie die Windows-Taste + R drücken und den Befehl "cmd" in die Zeile eingeben.
- Geben Sie an der Eingabeaufforderung den folgenden Befehl ein, um Node zu installieren.js:
- curl https://deb.nodesource.com/setup_14.x -o setup.sh
- sudo bash setup.sh
- sudo apt-get install -y nodejs
- sudo apt-get install -y build-essential
- Nach erfolgreicher Node-Installation.js, geben Sie den folgenden Befehl ein, um Browser Sync zu installieren:
- npm install -g browser-sync
- Geben Sie "browser-sync --version" ein, um zu überprüfen, ob die Installation erfolgreich war. Wenn Sie die Version von Browser Sync sehen, ist die Installation erfolgreich verlaufen.
- Jetzt können Sie Browser Sync verwenden, um Ihren Browser während der Entwicklung zu synchronisieren und automatisch zu aktualisieren.
Jetzt sind Sie bereit, Browser Sync unter Windows 10 zu verwenden und alle seine Funktionen beim Entwerfen von Websites zu genießen.
