/ COMPUTER SCIENCE, JAVASCRIPT / 1 min read

LiveReload actualiza (refreshing) el navegador automáticamente

LiveReload, el país de las maravillas para los desarrolladores web, un lugar increíble donde los navegadores no necesitan un botón de Refresh.

Hace algunos meses utilicé Browsersync con Jekyll, herramienta similar a LiveReload, pero con más características y recuerdo que no obtenía el resultado deseado porque el navegador se actualizaba muy lento, probablemente por una mala configuración y como no disponía tiempo para adentrar en la documentación lo dejé así.

Solamente necesitaba un refresh automático simple y eso es lo que hace LiveReload; supervisa los cambios en el sistema de archivos y tan pronto como se guarda un archivo, se preprocesará según sea necesario y el navegador se actualizará.

También, cuando cambias un archivo CSS o una imagen, el navegador se actualiza al instante sin volver a cargar la página manualmente.

Para utilizar en un proyecto Jekyll, simplemente se agrega en el Gemfile y se instala mediante bundle install.

group :jekyll_plugins do
  # ... others plugins ...
  gem 'jekyll-livereload'
end

## BrowserSync en Laravel

En webpack.mix.js agregamos lo siguiente, cambiando domain.test por tu URL de desarrollo:

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .browserSync('domain.test');

Instalamos dependencias npm run install y la próxima vez que ejecutemos npm run watch nuestro sitio se refrescará automáticamente con BrowserSync.

eleazar

Eleazar Resendez

A software engineer — for the last 3 years focused on Laravel framework. Reliable, responsible, serious with a strong entrepreneurial can-Do mentality and the goal of making a huge positive impact on this world.

Read More