Llegó Livereload, adiós F5


Si te has decidido alguna vez por crear un sitio web o algún contenido en HTML para mostrarlo en el navegador web, habrás notado la interminable batalla que debemos librar para ver los cambios hechos cada vez que escribimos par de líneas de código.

Control + S en el editor, Alt + Tab para enfocar el navegador y finalmente F5 para ver los cambios, es la rutina que tanto nos irrita, y más si estamos trabajando con CSS donde una sola línea de código puede hacer cambios significativos en la apariencia de nuestro sitio.

Lo mejor que había visto hasta el momento era en Dreamweaver, donde al salvar el fichero puedes ver los cambios apretando F12, pues se te abre la página en el navegador automáticamente. Ahora pregunto ¿Y si el fichero que estás editando es un archivo CSS ? ¿Servirá Control + S y luego F12? No, en ese caso tendrás que seleccionar el archivo html y luego apretar F12.

¿No habrá alguna solución mejor?

Sí, Livereload y el editor de texto avanzado sublime text 2. Este plugin de sublime text 2 te permite ver los cambios en el navegador de forma instantánea al salvar ficheros html, y todo lo que esté relacionado a ese fichero, ya sean archivos CSS y/o archivos javascript.

livereload mycyberacademy

Su funcionamiento es simple, el plugin de sublime llamado Livereload tiene una serie de eventos que están a la “escucha” de cualquier cambio en el sistema de archivos, donde al suceder, éste le notifica al navegador que actualice la página por ti. El navegador se dará cuenta de la notificación del plugin de sublime con la ayuda de un complemento que debemos instalarle llamado Livereload, el cual está disponible en la chrome store para el popular navegador Google Chrome y para Firefox:

Teniendo instalado el plugin de sublime (solo tienes que copiar la carpeta del plugin hacia la carpeta de plugins de sublime en Data/Packages ) y el complemento para el navegador, abres el proyecto web en sublime y también en el navegador , observa que en este aparece un icono con forma de diana, al dar click en este icono, el círculo del medio de la diana se debe rellenar de color negro, es ahí cuando ya podrás editar tu código y se pre visualizarán automáticamente los cambios en el navegador con solo salvar el fichero, diciéndole de esta forma ¡Adiós al F5!

Si actualmente te encuentras navegando con Chrome, simplemente haz click en el siguiente boton para instalar LiveReload.

Instalar Live Reload