Gulp como servidor de desarrollo web

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

El task runner de Gulp.js últimamente se está volviendo cada vez más popular. Se puede utilizar para muchas cosas, como concatenar archivos de JavaScript o comprimir imágenes. Si eres nuevo en Gulp.js, te recomiendo que comiences administrando tus tareas de compilación con Gulp.js.

En este tutorial, aprenderás a usar Gulp.js, con el fin de ejecutar un servidor web local con soporte integrado livereload.

El modo antiguo

Supongamos que queremos desarrollar una aplicación de una sola página. El punto de entrada de esta aplicación es un archivo simple index.html. Nuestro objetivo es acceder a este archivo a través del navegador, yendo a localhost. En el pasado, quizás configuraste un servidor Apache o Nginx. Bueno, eso ya no es necesario.

Una mejor opción

Hoy en día, existe una implementación en JavaScript para casi todo, incluso para un servidor web. El más popular se llama Connect. Lo usaremos, utilizando un plugin Gulp.js llamado gulp-connect.

En las siguientes secciones, configuraremos un servidor web local para una aplicación de una sola página, por lo que asumiré que ya has configurado los archivos básicos, como el archivo gulpfile.js.

Configuración inicial

Comenzamos instalando el plugin Connect con el siguiente comando. Todo lo que necesitamos se instalará con este único comando.

1	npm install --save-dev gulp-connect

Consejo: el comando npm install --save-dev se puede abreviar con npm i -D.

Ahora, definamos una tarea para el servidor web. Nuestro archivo gulpfile.js debería verse así:

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

gulp.task('webserver', function() {
  connect.server();
});

gulp.task('default', ['webserver']);

Ahora podemos iniciar el servidor web simplemente ejecutando gulp en la terminal. Podemos abrir localhost:8080 en nuestro navegador, donde deberíamos ver el archivo index.html. El servidor web organiza la estructura de los archivos de la carpeta, donde reside el archivo gulpfile.js, en la raíz de localhost:8080. El servidor se ejecutará hasta que detengas la tarea presionando las teclas Ctrl + c. ¡Genial!

Puedes encontrar el código fuente para este y todos los siguientes ejemplos en Github. Cada ejemplo contiene todos los archivos necesarios para reproducir una configuración de trabajo. Sólo tienes que ejecutar la función npm install en el respectivo directorio.

Incorporando el soporte de `livereload`

Fue fácil configurar el servidor web básico, ¿verdad? Así que continuemos ejecutando livereload. Tenemos que hacer dos cosas: primero decirle al servidor web que comience con el soporte de livereload y, en segundo lugar, le decimos a livereload cuándo actualizar la página con contenido nuevo.

El primer paso es sencillo. Simplemente establece la propiedad livereload en true. La tarea del webserver se ve así:

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

El segundo paso depende de tu caso práctico. En este ejemplo, configuraremos la compilación automática de archivos LESS en una hoja de estilos CSS e ingresaremos al navegador. Analicemos este ejemplo en sus partes. Necesitamos un "observador", que compruebe si se cambiaron algunos archivos LESS. Este observador debe entonces activar el compilador LESS, que genera un archivo CSS. Este archivo CSS se debe ingresar a través de livereload.

En este ejemplo, usaremos el plugin gulp-less. Puedes instalarlo ejecutando el comando npm install --save-dev gulp-less. El observador ya viene incluido en Gulp.js. La estructura de los archivos de nuestra aplicación debería verse más o menos así:

.
├── node_modules
│   └── ...
├── styles
│   └── main.less
├── gulpfile.js
├── index.html
└── package.json

En la tarea watch, Gulp.js escucha los cambios en todos los archivos *.less de la carpeta styles y activa la tarea less. Aquí, el archivo main.less es el punto de entrada para LESS. El resultado se ingresará automáticamente en el navegador, después de cada paso de la compilación. El código del archivo gulpfile.js tiene el siguiente aspecto, no dudes en copiarlo y pegarlo en tu proyecto.

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

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

gulp.task('less', function() {
  gulp.src('styles/main.less')
    .pipe(less())
    .pipe(gulp.dest('styles'))
    .pipe(connect.reload());
});

gulp.task('watch', function() {
    gulp.watch('styles/*.less', ['less']);
})

gulp.task('default', ['less', 'webserver', 'watch']);

Vamos a volver a ejecutar el plugin gulp en la terminal y abrir de nuevo localhost:8080 en el navegador. Ahora podemos hacer algunos cambios en un archivo LESS en la carpeta styles. Se compilará y actualizará instantáneamente en el navegador. Ten en cuenta que no necesitas ninguna extensión del navegador. livereload funciona de inmediato.

Algunos ajustes

Ten en cuenta que el archivo anterior gulpfile.js es sólo una demostración mínima de cómo utilizar Gulp.js como un servidor web con livereload. Te recomiendo jugar con algunos otros plugins. También debes intentar reorganizar la estructura de tareas y utilizar el plugin gulp-watch no incorporado, que te permite procesar solo los archivos modificados. Esto se vuelve importante si estás trabajando con una base de código más grande. Más adelante en este tutorial, veremos cómo se vería una estructura de tareas alternativa.

Cambiar el nombre del host y el puerto

El plugin gulp-connect tiene muchas opciones de configuración. Por ejemplo, puedes modificar el puerto o el nombre del host del servidor web. Incluso puedes utilizar un nombre de host personalizado con el puerto 80 (el valor predeterminado es localhost:8080).

1	connect.server({
2	port: 80,
3	host: 'gulp.dev'
4	});

Para que esto funcione, necesitamos tener el plugin gulp.dev en nuestro archivo hosts y ejecutar el comando sudo gulp. Se necesitan los derechos del administrador para utilizar el puerto 80.

Algunas características avanzadas

Puedes ir aún más lejos utilizando el plugin de conexión para generar varios servidores web al mismo tiempo. Esto resulta útil, por ejemplo, si quieres ejecutar un servidor de desarrollo web y ejecutar pruebas de integración, simultáneamente.

El plugin gulp-connect también ofrece la posibilidad de utilizar varios directorios como carpeta raíz. Por ejemplo, cuando usas CoffeeScript y quieres guardar los archivos JavaScript compilados en una carpeta temporal, puedes organizar esta carpeta sin contaminar la carpeta de origen.

Si quieres obtener más ejemplos, consulta el repositorio de GitHub.

Reestructuración de nuestro código

En el ejemplo anterior configuramos un archivo gulpfile.js mínimo para compilar archivos LESS en CSS e ingresarlos inmediatamente en el navegador. Funcionó, pero podemos hacerlo mejor. Puede ser problemático que mezclemos los pasos de compilación y livereload en una sola tarea. Por lo tanto, vamos a dividirlos y ver los cambios en los archivos generados. Para eso, vamos a utilizar el plugin gulp-watch mencionado anteriormente.

Vayamos incluso un paso más allá y agreguemos un paso de compilación de CoffeeScript. Con este paso adicional, la nueva estructura debería ser más clara. Instalamos los nuevos plugins en un lote a través de:

1	npm install --save-dev gulp-watch gulp-coffee

Y la función require en la parte superior de nuestro archivo gulpfile.js. En la siguiente configuración, supongo que ya tienes algunos archivos .coffee en un directorio llamado scripts. Si quieres ver un ejemplo de configuración, consulta este repositorio. El archivo gulpfile.js reestructurado podría verse así. Vamos a repasar los cambios, paso a paso.

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  watch = require('gulp-watch'),
  less = require('gulp-less'),
  coffee = require('gulp-coffee');

gulp.task('webserver', function() {
  connect.server({
    livereload: true,
    root: ['.', '.tmp']
  });
});

gulp.task('livereload', function() {
  gulp.src(['.tmp/styles/*.css', '.tmp/scripts/*.js'])
    .pipe(watch())
    .pipe(connect.reload());
});

gulp.task('less', function() {
  gulp.src('styles/main.less')
    .pipe(less())
    .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('coffee', function() {
  gulp.src('scripts/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('.tmp/scripts'));
});

gulp.task('watch', function() {
  gulp.watch('styles/*.less', ['less']);
  gulp.watch('scripts/*.coffee', ['coffee']);
})

gulp.task('default', ['less', 'coffee', 'webserver', 'livereload', 'watch']);

El mayor cambio que vemos es la tarea adicional livereload. Esta tarea sólo observa (a través del plugin gulp-watch) los cambios en los archivos compilados y los actualiza en el navegador. La función watch() personalizada nos permite simplemente recargar los archivos modificados, mientras que el comando incorporado gulp.watch() recargaría todos los archivos y no sólo los modificados.

Debido a esta única tarea adicional, no necesitamos un comando .pipe(connect.reload()) después de cada paso de compilación. Así que separamos las tareas dependiendo de su prioridad, lo que siempre es una buena idea en el desarrollo de software.

También notamos que los archivos compilados ya no se guardan en su carpeta de origen respectiva. Ahora se almacenan en una carpeta temporal llamada .tmp. El contenido de esta carpeta son solo archivos generados y ya no contaminarán los directorios de styles o scripts. También te recomiendo excluir esta carpeta del sistema de control de revisiones. Todo lo que tenemos que hacer para que esto funcione, es también organizar la carpeta .tmp como una carpeta raíz, que se hace mediante la siguiente función

1	root: ['.', '.tmp']

Esta configuración reestructurada debería funcionar igual que la anterior. Pero es mucho más limpia y fácil de ampliar.

Conclusión

Acabas de aprender a usar Gulp.js como servidor web.

Puedes combinar esta técnica con muchos otros casos prácticos, como probando o creando tu aplicación de una sola página. Ten en cuenta que este servidor web solo está destinado al desarrollo local. Para fines de producción, deberías utilizar una solución de mayor rendimiento como Nginx o CDN.

Ten en cuenta que todas las características presentadas también son posibles con Grunt o proyectos similares. Gulp.js sólo te ofrece una forma muy simple y elegante de hacer las cosas.