Gulp - Live Reload

Live Reload especifica los cambios en el sistema de archivos. BrowserSyncse utiliza para ver todos los archivos HTML y CSS en el directorio CSS y realizar una recarga en vivo de la página en todos los navegadores, siempre que se modifiquen los archivos. BrowserSync acelera el flujo de trabajo al sincronizar URL, interacciones y cambios de código en varios dispositivos.

Instalación del complemento BrowserSync

El complemento BrowserSync proporciona inyección de CSS entre navegadores y se puede instalar con el siguiente comando.

npm install browser-sync --save-dev

Configuración del complemento BrowserSync

Para usar el complemento BrowserSync, debe escribir la dependencia en su archivo de configuración como se muestra en el siguiente comando.

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

Necesita crear una tarea para que BrowserSync funcione con el servidor usando Gulp. Dado que está ejecutando el servidor, debe llamar a BrowserSync sobre la raíz de su servidor. Aquí, estamos usando el directorio base como 'compilación'.

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

También puede inyectar nuevos estilos en el navegador utilizando la siguiente tarea para el archivo 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
   }))
});

Antes de crear una tarea para BrowserSync, debe instalar los complementos usando el administrador de paquetes y escribir las dependencias en su archivo de configuración como se define en este capítulo .

Cuando haya terminado con la configuración, ejecute BrowserSync y watchTask para que ocurra el efecto de recarga en vivo. En lugar de ejecutar dos líneas de comando por separado, las ejecutaremos juntas agregando browserSynctask junto con watchTask como se muestra en el siguiente código.

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

Ejecute el siguiente comando en el directorio de su proyecto para ejecutar las tareas combinadas anteriores.

gulp

Después de ejecutar la tarea con el comando anterior, obtendrá el siguiente resultado en el símbolo del sistema.

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

Abrirá la ventana del navegador con la URL. http://localhost:3000/. Cualquier cambio realizado en el archivo CSS se reflejará en el símbolo del sistema y el navegador se recargará automáticamente con los estilos modificados.