Gulp - Live Reload

Live Reload gibt die Änderungen im Dateisystem an. BrowserSyncwird verwendet, um alle HTML- und CSS-Dateien im CSS-Verzeichnis zu überwachen und in allen Browsern ein Live-Reload auf die Seite durchzuführen, wenn Dateien geändert werden. BrowserSync beschleunigt den Workflow, indem URLs, Interaktionen und Codeänderungen auf mehreren Geräten synchronisiert werden.

BrowserSync Plugin installieren

Das BrowserSync-Plugin bietet eine browserübergreifende CSS-Injektion und kann mit dem folgenden Befehl installiert werden.

npm install browser-sync --save-dev

BrowserSync Plugin konfigurieren

Um das BrowserSync-Plugin zu verwenden, müssen Sie Abhängigkeiten in Ihre Konfigurationsdatei schreiben, wie im folgenden Befehl gezeigt.

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

Sie müssen eine Aufgabe erstellen, damit BrowserSync mit Gulp mit dem Server zusammenarbeitet. Da Sie Server ausführen, müssen Sie BrowserSync über das Stammverzeichnis Ihres Servers informieren. Hier verwenden wir das Basisverzeichnis als 'Build'.

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

Sie können dem Browser auch neue Stile hinzufügen, indem Sie die folgende Aufgabe für die CSS-Datei verwenden.

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

Bevor Sie eine Aufgabe für BrowserSync erstellen, müssen Sie die Plugins mit dem Paketmanager installieren und Abhängigkeiten in Ihre Konfigurationsdatei schreiben, wie in diesem Kapitel definiert .

Wenn Sie mit der Konfiguration fertig sind, führen Sie sowohl BrowserSync als auch watchTask aus, um das Auftreten eines Live-Reloading-Effekts festzustellen. Statt läuft separat zwei Befehlszeilen, werden wir sie zusammen laufen durch Zugabe von browserSynctask zusammen mit dem watchTask wie im folgenden Code dargestellt.

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus, um die oben genannten kombinierten Aufgaben auszuführen.

gulp

Nachdem Sie die Aufgabe mit dem obigen Befehl ausgeführt haben, erhalten Sie an der Eingabeaufforderung das folgende Ergebnis.

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

Es öffnet sich das Browserfenster mit der URL http://localhost:3000/. Alle an der CSS-Datei vorgenommenen Änderungen werden in der Eingabeaufforderung angezeigt und der Browser wird automatisch mit den geänderten Stilen neu geladen.