3 Métodos para la Recarga Automática del Navegador

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste tutorial aprenderás sobre la recarga del navegador-específicamente la recarga automática-y consideraremos tres diferentes métodos para hacerlo. ¡Comencemos!

Mira el Video

Consideremos un típico flujo de trabajo front-end: tienes tu editor de código, quizá estás escribiendo algo de HTML, luego tienes CSS que podría involucrar SASS, y tienes tu navegador para realizar pruebas. Cada vez que realizas un cambio a tu código regresas a tu navegador, pulsas cargar de nuevo y ves tus cambios que toman efecto.

Puede parecer como un procedimiento rápido, pero agregar ésta acción de recargar con el paso tiempo la encontrarás como un desperdicio. Seguramente puede ser mejorada. Veamos tres herramientas que pueden encargarse de todo el proceso de recarga por tí, automáticamente.

LiveReload

LiveReload ha estado en el escenario por algún tiempo, y es una sensacional herramienta. Viene con aplicaciones para Mac OS y Windows, y cuesta (al momento de escribir éste artículo) $9.99.

Empieza con insertar un snippet de Javascript en los archivos en los que estás trabajando, o úsalo en combinación con la extensión del navegador. Si estás usando una extensión de navegador, puedes necesitar ingresar a la configuración de la extensión para asegurarte que permitir accesar a los archivos esté habilitada.

Enlaces Útiles

Grunt Watch

Si estás cómodo usando la línea de comandos ampliamente recomiendo considerar ésta opción. Grunt es un ejecutor de tareas basado en JavaScript, y puedes usarlo para automatizar muchas de las tareas de las que normalmente te encargarías manualmente-incluyendo recargar el navegador.

Vamos a usar el plugin Grunt Watch (realmente llamado "grunt-contrib-watch") que necesitarás cagar vía NPM.

La tarea a vigilar dentro de nuestro gruntfile.js incluye la opción livereload: true, y vigila todos los archivos en mi proyecto.

watch: {
    
    files: ['*.*'],
    options: {
        livereload: true
    }

}

De nuevo, necesito que la extensión LiveReload en mi navegador esté habilitada, y todo funcione como antes, con el beneficio añadido de poder ejecutar tareas adicionales.

Recursos Grunt

Browsersync

Método número tres, que rápidamente se está convirtiendo en mi favorito, es Browsersync. Browsersync es mucho más que sólo la utilidad para recargar una página web; también te permite ejecutar pruebas con navegadores sincronizados.

Para tener las cosas funcionando necesitarás Node.js, así que empieza por instalar eso. Para detalles de cómo hacer eso, consulta La Línea de Comandos para el Diseño Web: Domando Paquetes de Terceros. Con Node instalado, instala Browsersync con el siguiente comando npm (Gestor de Paquetes Node):

1	npm install g- browser-sync

Para usar BrowserSync necesitamos usar otro comando, y ésto cambiará dependiendo de qué queremos hacer exactamente. Por ejemplo, éste comando configurará el entorno de servidor estático, y sugiere que Browsersync vigile todos los archivos a actualizar:

1	browser-sync start --server --files "."

Para más detalles sobre los varios comandos que puedes usar, consulta la documentación.

Enlaces Útiles

Conclusión

¡Esto es todo! Espero que éste tutorial te haya convencido de dejar de perder tiempo y probar al menos uno de éstos métodos para recargar el navegador. Si tienes cualquier otro metodo que prefieras, ¡déjanos saberlo en los comentarios!