Actualizar Automáticamente un Sitio Web con LiveReload

Muchas veces tenemos el trabajo de diseñar un sitios web lo cual conlleva a realizar modificaciones constantes hasta llegar a obtener un producto deseado.

Mientras realizamos el desarrollo del sitio web tenemos que recargar la página cada vez que queramos visualizar algunas mejoras realizadas o simplemente ver el avance, como podrás darte cuenta esta tarea se vuelve tediosa.

Pues para hacerte la vida mas fácil existe herramienta LiveReload.

LiveReload monitorea los cambios en el sistema de archivos. Tan pronto como se guarda un archivo, se preprocesa, según sea necesario , y se actualice el navegador.

Aún más genial, cuando cambia un archivo CSS o una imagen, el navegador se actualiza al instante sin tener que recargar la página.

Con lo explicado espero que entiendas para que sirve LiveReload.

Implementar LiveReload con gulp.js

Para implementar esta tarea con gulp.js vamos a realizar algunas instalaciones previas, si no haz trabajado con gulp.js te invito a revisar el tutorial Instalación de Gulp.js para Automatizar Tareas Frontend.

Primero instala Command Line Interface (CLI) de gulp.js, esto nos servirá para poder ejecutar gulp.js desde el símbolo de sistema o terminal.

$ npm install --global gulp-cli

Accede al símbolo del sistema o terminal para ejecutar todos los comandos.


Ahora crea una carpeta el cual vendrá a ser tu proyecto, para este caso lo nombraremos tutorial-livereload, dentro de esta carpeta crea un archivo con el nombre de package.json con la ayuda de un editor de código por ejemplo sublime text y añade el siguiente código en su interior.

{
  "name": "tutorial-livereload",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0"
  }
}

Para instalar las devDependencies del archivo package.json, accedemos desde el símbolo de sistema a la ruta de la carpeta que hemos creado anteriormente y ejecutamos el siguiente comando.

$ npm install

La instalación toma un poco de tiempo, según la conexión a Internet.


Ahora dentro de la carpeta tutorial-livereload creada anteriormente crea un archivo con el nombre de gulpfile.js y añade el siguiente código en su interior.

var gulp = require('gulp'),  
  connect = require('gulp-connect');

/*
La tarea `connect` crea un servidor web local  
 apuntando a la carpeta base app (es esta carpeta 
donde se alojaran nuestros archivos), también  
personaliza el puerto a 7000 y activa livereload.  
*/
gulp.task('connect', function() {  
  connect.server({
      root: './app',
      port: 7000,
      livereload: true
  });
});

// La tarea `ficheros` apunta a la ruta de 
// "./app/**/*" esto se lee:
/* 
. -> la raíz del proyecto,
/app -> la carpeta que contiene nuestros archivos, 
/** -> todas las sub carpetas, 
* -> todos los archivos.
En pocas palabras que realice una recarga  
cuando haya modificaciones en cualquier archivo  
que se encuentre en la carpeta app.  
*/
gulp.task('ficheros', function () {  
  gulp.src('./app/**/*')
    .pipe(connect.reload());
});



/*========================================
     ... Mas tareas Gulp.js ...
=========================================*/

/*
La tarea `watch` es la que vigila los cambios  
de una determinada tarea y si detecta modificaciones lo vuelve a ejecutar.  
*/
gulp.task('watch', function () {  
  gulp.watch(['./app/**/*'], ['ficheros']);
  /*
   Coloca aquí tus tareas con el formato anterior
   para que se vuelva a ejecutar si hay cambios
  */
});

/*
Tarea por defecto de gulp.js  
*/
gulp.task('default', ['connect', 'watch']);  

Ahora dentro de proyecto tutorial-livereload crea la carpeta app en su interior crea las sub carpetas css (contendrá tus archivos .css), js (contendrá tus archivos .js) y un archivo index.html (importante).

Una vez agregado todas las carpetas y archivos tendrás una estructura similar al siguiente ejemplo.

├── /tutorial-livereload
|   └── /app
|      ├── /css
|      ├── /js
|      ├── index.html
|   ├── /node_modules //Esta carpeta se crea automaticamente
|   ├── gulpfile.js
└────── package.json

Para ver el funcionamiento ejecuta el comando.

$ gulp

Una vez que este listo abre un navegador web y escribe la ruta http://localhost:7000. Ahora cada vez que realices un cambio en el front-end la pagina se recargara automáticamente.


Implementar LiveReload para frameworks (Ghost, Jekyll, etc)

Muchas veces ya tenemos proyectos desarrollados en diferentes frameworks (Ghost, Jekyll, ...) y para implementar LiveReload en este tipo de entornos se nos hace mas engorroso, pero bueno aquí aprenderemos como hacerlo funcionar en estos casos.

Continuando para instalar LiveReload dirígete a la pagina oficial, descarga la aplicación que se ajuste a tu sistema operativo, luego instalalo como cualquier aplicación.

Aplicación LiveReload

Una vez instalado al ejecutar la aplicación obtendrás una ventana similar a la siguiente imagen.

Aplicación LiveReload

Para agregar la carpeta de nuestro proyecto web, haz clic en el botón + add y asigna la ruta.

Agregar Proyecto LiverReload

Puedes agregar n proyectos o n carpetas, los cuales se listarán similar a la siguiente imagen.

Proyecto Agregado LiveReload

Hasta ahora solo hemos instalado la aplicación y agregado el proyecto web. Pero para que LiveReload trabaje correctamente falta agregar la librería JavaScript de LiveReload.

En la imagen inferior podemos apreciar las recomendaciones como son:

  1. El proyecto debe de estar corriendo en un servidor local por ejemplo http://localhost:2368.
  2. Debes insertar el script apuntando a livereload.js antes del cierre de la etiqueta </body> o instalar la extensión para el navegador como lo vamos a realizar en este tutorial.
  3. Recuerda que la aplicación LiveReload debe de estar abierto hasta que culmines tu desarrollo.

Agregando Plugin LiveReload


Script LiveReload

<script>  
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')  
</script>  

Descargar extensión LiveReload

Puedes descargar las extensiones para los nevegadores como Firefox, Google Chrome y Safari de la siguiente página.

Extensiones LiveReload

Para este tutorial voy a mostrar la extensión instalada en Chrome.

Para agregar la librería livereload.js con la extensión del navegador web, realizaremos lo siguiente.

Apagado o desactivado.

Cuando la extensión LiveReload esta desactivado el icono contendrá un circulo interno vació.

Extensión LiveReload Apagado

Encendido o activo.

Cuando la extensión LiveReload esta activado el icono contendrá un circulo interno relleno.

Extensión LiveReload Encendido

Si todo salio bien, inspecciona tu código fuente y antes del cierre de la etiqueta </body> observaras que se ha añadido la librería livereload.js

Script Livereload


Ahora cada vez que realices cambios dentro de tu proyecto, LiveReload se encarga de recargar el navegador automáticamente para mostrar los cambios realizados. Espero que te sirva.

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión