Gulp - Ricarica dal vivo

Live Reload specifica le modifiche nel file system. BrowserSyncviene utilizzato per visualizzare tutti i file HTML e CSS nella directory CSS ed eseguire il caricamento in tempo reale della pagina in tutti i browser, ogni volta che i file vengono modificati. BrowserSync rende il flusso di lavoro più veloce sincronizzando URL, interazioni e modifiche al codice su più dispositivi.

Installazione del plugin BrowserSync

Il plug-in BrowserSync fornisce l'iniezione CSS cross-browser e può essere installato utilizzando il seguente comando.

npm install browser-sync --save-dev

Configurazione del plugin BrowserSync

Per utilizzare il plug-in BrowserSync, è necessario scrivere la dipendenza nel file di configurazione come mostrato nel comando seguente.

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

È necessario creare un'attività affinché BrowserSync funzioni con il server utilizzando Gulp. Dato che stai eseguendo il server, devi tel BrowserSync sulla radice del tuo server. Qui stiamo usando la directory di base come "build".

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

È inoltre possibile inserire nuovi stili nel browser utilizzando la seguente attività per il file CSS.

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
   }))
});

Prima di creare un'attività per BrowserSync, è necessario installare i plug-in utilizzando il gestore di pacchetti e scrivere le dipendenze nel file di configurazione come definito in questo capitolo .

Quando hai finito con la configurazione, esegui sia BrowserSync che watchTask per il verificarsi dell'effetto di ricarica in tempo reale. Invece di eseguire due righe di comando separatamente, le eseguiremo insieme aggiungendo browserSynctask insieme a watchTask come mostrato nel codice seguente.

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

Esegui il seguente comando nella directory del tuo progetto per eseguire le attività combinate sopra.

gulp

Dopo aver eseguito l'attività utilizzando il comando precedente, otterrai il seguente risultato nel prompt dei comandi.

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

Si aprirà la finestra del browser con l'URL http://localhost:3000/. Qualsiasi modifica apportata al file CSS si rifletterà nel prompt dei comandi e il browser verrà ricaricato automaticamente con gli stili modificati.