La línea de comandos para el diseño web: Live Reload (Recarga Automática) & Browser Sync

() translation by (you can also view the original English article)

En la última lección aprendiste cómo tener todo tu proyecto compilado o creado con comandos cortos como grunt, grunt watch, gulp y gulp watch.

En ésta lección aprenderás cómo crear comandos que agregan una capa extra de asombro a tus proyectos, habilitando la recarga automática de la página y la sincronización de navegadores.

Si aún no has completado los otros tutoriales en ésta serie, por favor regresa y complétalos antes de que inicies aquí.

Live Reload (Recarga Automática)

Nota: Para evitar confusión, hay una combinación de aplicación de escritorio y plugin de Chrome llamado LiveReload que con frecuencia es usada en conjunto con muchos paquetes npm para manejar la recarga automática. Sin embargo, de la forma en que haremos la configuración, las aplicaciones de escritorio y el plugin del navegador no serán requeridos.

Live Reload via Grunt

Para permitir que funcione la recarga automática se necesita de un servidor local que pueda ser recargado, o sea una forma de ver tu sitio localmente simulando un alojamiento en la web con un protocolo http:// en lugar de file://.

Con tu proyecto Grunt nos encargaremos de habilitar un servidor local para los archivos estáticos de tu proyecto, y la recarga automática de ese servidor local, usando el plugin grunt-express.

Instala grunt-express en tu proyecto con:

1	npm install grunt-express --save-dev

Luego habilita el plugin en tu Gruntfile al agregar ésto debajo de tul líneas existentes grunt.loadNpmTasks:

1	grunt.loadNpmTasks('grunt-express');

Configura la tarea express al agregar éste código:

    express: {
      all: {
        options: {
          bases: 'build',
          livereload: true,
          open: 'http://localhost:3000'
        }
      }
    },

Notarás que en la configuración de nuestra tarea express tenemos la opción livereload establecida en true, así después de que nuestra vista previa local sea lanzada automáticamente se recargará cuando los cambios sean detectados.

Ahora agregaremos una nueva tarea llamada start. Usaremos ésta tarea para desencadenar las tareas express y watch a la vez.

Añade éste debajo de tu existente línea grunt.registerTask:

1	grunt.registerTask('start', ['express', 'watch']);

Ahora ejecuta el comando:

1	grunt start

... y deberías ver tu navegador predeterminado abierto con la vista previa de tu proyecto mostrada dentro.

La tarea watch está ahora ejecutándose y compilará tus cambios de Stylus y Jade al directorio "build".

Express a su vez está monitoreando cualquier cambio que ocurra en el directorio "build", así si tus archivos HTML, CSS, o JS son recompilados automáticamente recargará tu vista previa.

LiveReload vía Gulp

Posteriormente continuaremos y lograremos el mismo tipo de vista previa de servidor local en tu proyecto Gulp. Ésta vez vamos a usar el plugin gulp-connect.

Instala gulp-connect a tu proyecto con éste comando:

1	npm install --save-dev gulp-connect

Házlo accesible en tu Gulpfile al agregar ésta línea debajo de las otras líneas donde has utilizado la función require():

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

Configura una nueva tarea llamada connect al agregar éste código debajo del código de tu otra tarea:

gulp.task('connect', function() {
  connect.server({
    root: 'build',
    livereload: true,
    open: true
  });
});

Al igual que lo hicimos con Grunt, ahora vamos a crear una tarea personalizada llamada start que lanzará nuestra vista previa de localhost e inciará nuestra tarea watch.

Agrega ésta línea en la parte inferior de tu Gulpfile:

1	gulp.task('start', ['connect', 'watch']);

Para habilitar la recarga de tu vista previa del servidor local, vamos a conectar otro "pipe" (tubo o caño) al final de ambas tareas css y html.

Agrega éste activador de recarga al final de cada una:

1	.pipe(connect.reload())

Haciendo que las tareas pasen a ser:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
  	.pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
		.pipe(connect.reload())
});

... y:

gulp.task('html', function() {
  gulp.src('source/jade/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('build'))
    .pipe(connect.reload())
});

Ahora ejecuta el comando:

1	gulp start

... luego ve a http://localhost:8080 y verás la vista previa de tu sitio.

Guarda un cambio en cualquiera de tus archivos Jade o Stylus y ¡observa la veloz recompilación y la recarga!

BrowserSync (Sincronización de Navegadores)

Ahora que tienes tu vista previa del servidor local automáticamente recargada, podrías dejarla así y aún tener una configuración del proceso de desarrollo de primera categoría para tu proyecto. No obstante, cuando se trata de poder hacer testeo en múltiples navegadores y dispositivos, tener también BrowserSync a mano vale mucho la pena.

Con BrowserSync tienes una vista previa de la URL que puedes conectar a cualquier navegador en tu máquina, así como navegadores en cualquier otro dispositivo en la misma conexión a internet.

Todas las vistas previas que tienes ejecutándose serán actualizadas mientras haces cambios así que puedes ver los resultados a nivel global, y todas tus interacciones serán reflejadas en cada instancia. Si haces scroll (desplazas la barra) o abres un menú en un navegador verás cómo los demás navegadores y dispositivos responden al mismo tiempo.

BrowserSync vía Grunt

Para instalar el plugin grunt-browser-sync en tu proyecto Grunt ejecuta el siguiente comando:

1	npm install grunt-browser-sync --save-dev

Coloca entre comentario o borra la línea que usaste para habilitar grunt-express:

1	// grunt.loadNpmTasks('grunt-express');

Luego agrega ésta línea para habilitar grunt-browser-sync:

1	grunt.loadNpmTasks('grunt-browser-sync');

Coloca entre comentario o borra la tarea express que creaste previamente, y agrega éste código de configuración para la tarea browserSync:

    browserSync: {
      bsFiles: {
        src : ['build/*.css', 'build/*.html']
      },
      options: {
        watchTask: true,
        server: {
          baseDir: "build"
        }
      }
    },

Localiza tu tarea start y cámbiala para que ejecute la tarea browserSync en lugar de la tarea express, de:

1	grunt.registerTask('start', ['express', 'watch']);

...a:

1	grunt.registerTask('start', ['browserSync', 'watch']);

Ahora cuando ejecutes el comando:

1	grunt start

aún verás una vista previa abierta del servidor local, y aún se recargará cuando guardes cambios, pero la diferencia ahora es que la sincronización de navegadores está activa pues es la capacidad de ver tu vista previa en otros dispositivos.

En la terminal después iniciar tu servidor BrowserSync verás ésto:

1	————————————
2	Local: http://localhost:3000
3	External: http://192.168.1.3:3000
4	————————————
5	UI: http://localhost:3001
6	UI External: http://192.168.1.3:3001
7	————————————

Toma la dirección etiquetada como Local, colócala en algunos de los otros navegadores en tu máquina, e ingresa la dirección etiquetada como External en otros dispositivos que tienes compartiendo la misma conexión. Luego observa las respuestas sincronizadas que obtienes en todas las instancias mientras interactúas con cualquiera de ellas.

Para más información sobre BrowserSync vía Grunt ve a: http://www.browsersync.io/docs/grunt/

BrowserSync vía Gulp

Ahora configuraremos el mismo proceso, ésta vez utilizando el plugin browser-sync para Gulp.

Instala el plugin en tu proyecto Gulp con:

1	npm install browser-sync gulp --save-dev

Coloca entre comentario o borra ésta línea:

1	// var connect = require('gulp-connect');

... y remplázala con:

1	var browserSync = require('browser-sync');

Coloca entre comentario o borra la tarea existente connect y agrega ésta nueva tarea browser-sync:

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "build"
    }
  });
});

Al final de las tareas de css y html localiza los dos lugares que agregaste a la línea:

1	.pipe(connect.reload())

... y rempláza cada una de las dos líneas con:

1	.pipe(browserSync.reload({stream:true}))

Y finalmente localiza tu existente tarea start y edítala para ejecutar la tarea browser-sync en lugar de la tarea connect, remplazando ésto:

1	gulp.task('start', ['connect', 'watch']);

... con ésto:

1	gulp.task('start', ['browser-sync', 'watch']);

Ahora cuando ejecutes el comando:

1	gulp start

... una ventana de navegador surgirá con tu vista previa en ella. Al igual que cuando utilizaste BrowserSync vía Grunt, las URL de la vista previa ahora sincronizarán cada navegador en cualquier dispositivo que comparta tu conexión de internet.

Para más información sobre BrowserSync vía Gulp visita: http://www.browsersync.io/docs/gulp/

En el Próximo Tutorial

Ahora has recorrido los puntos esenciales de la configuración de tus proyectos desde cero para apalancar la línea de comandos durante el desarrollo. Pero ¿Qué tal si no quieres iniciar desde cero? ¿Qué tal si cuando quieres usar frameworks existentes de terceros, o sólo quieres tener nociones?

En el próximo tutorial aprenderás cómo usar la línea de comandos para crear completamente nuevos proyectos en cuestión de minutos, con todo el código de terceros que necesitan, así como la gestión de tareas en Grunt o Gulp, todo configurado y listo para implementarse.

¡Nos vemos en el próximo tutorial!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!