Gulp - Rechargement en direct

Live Reload spécifie les changements dans le système de fichiers. BrowserSyncest utilisé pour regarder tous les fichiers HTML et CSS dans le répertoire CSS et effectuer un rechargement en direct de la page dans tous les navigateurs, chaque fois que les fichiers sont modifiés. BrowserSync accélère le flux de travail en synchronisant les URL, les interactions et les modifications de code sur plusieurs appareils.

Installation du plug-in BrowserSync

Le plugin BrowserSync fournit une injection CSS entre navigateurs et peut être installé à l'aide de la commande suivante.

npm install browser-sync --save-dev

Configuration du plug-in BrowserSync

Pour utiliser le plugin BrowserSync, vous devez écrire la dépendance dans votre fichier de configuration comme indiqué dans la commande suivante.

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

Vous devez créer une tâche pour que BrowserSync fonctionne avec le serveur utilisant Gulp. Puisque vous utilisez le serveur, vous devez donc appeler BrowserSync à propos de la racine de votre serveur. Ici, nous utilisons le répertoire de base comme «build».

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

Vous pouvez également injecter de nouveaux styles dans le navigateur en utilisant la tâche suivante pour le fichier 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
   }))
});

Avant de créer une tâche pour BrowserSync, vous devez installer les plugins à l'aide du gestionnaire de packages et écrire les dépendances dans votre fichier de configuration comme défini dans ce chapitre .

Lorsque vous avez terminé la configuration, exécutez à la fois BrowserSync et watchTask pour l'apparition de l'effet de rechargement en direct. Au lieu d'exécuter deux lignes de commande séparément, nous les exécuterons ensemble en ajoutant browserSynctask avec watchTask comme indiqué dans le code suivant.

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

Exécutez la commande suivante dans le répertoire de votre projet pour exécuter les tâches combinées ci-dessus.

gulp

Après avoir exécuté la tâche à l'aide de la commande ci-dessus, vous obtiendrez le résultat suivant dans l'invite de commande.

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

Cela ouvrira la fenêtre du navigateur avec l'URL http://localhost:3000/. Toutes les modifications apportées au fichier CSS seront reflétées dans l'invite de commande et le navigateur se recharge automatiquement avec les styles modifiés.