En el artículo anterior veíamos commo instalar node e inicializar nuestro primer proyecto. Ahora vamos a darle un poco de vida a node instalando Gulp para empezar a hacer nuestras primeras paginas.

Pero antes de nada, ¿que es esto de Gulp?

Vamos a limitarnos a la definición que nos ofrece google sobre esta herramienta. "Es una herramienta, en forma de script en NodeJS, que te ayuda a automatizar tareas comunes en el desarrollo de una aplicación, como pueden ser: mover archivos de una carpeta a otra, eliminarlos, minificar código, sincronizar el navegador cuando modificas tu código, validar sintáxis y un largo etcétera."

En pocas palabras, gulp será el encargado de obrar la magia que hará que todo nuestro proyecto compile y funcione. ¿Interesate? pues vamos a ello.

Instalando Gulp

Lo ideal para instalar Gulp será instalarlo de forma global en nuestro ordenador para tenerlo disponible en todo momento ya que sus comandos serán muy utilizados aunque esto ya os lo dejo a vuesttra elección. Yo lo instalaré de forma global con el siguiente comando:

	npm install -g gulp

Tras esperar a que se instale, comprobamos que todo ha ido bien ejecutando en la consola lo siguiente:

	gulp -version

Existen cientos de modulos asociados a gulp que nos permitirán realizar diversas acciones pero nosotros hemos elegido unos pccos para que veais un ejemplos sencillo de lo que podemos hacer.

Antes de nada debemos crear un archivo gulpfile.js vacío en la carpeta de nuestro proyecto, al mismo nivel que nuestro package.json

Para comenzar vamos a instalar gulp-connect que es un módulo que permitirá generar un servidor web en nuestro local y que correrá bajo http://localhost:8080 por defecto.

Estos módulos os recomiendo que los instaléis en modo local ya que será módulos específicos de este proyecto.

	npm install gulp-connect

Pero, ¿Y como usamos este módulo?

Debemos abrir el archivo gulpfile.js que habíamos creado previamente y escribir en él lo siguiente:

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

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

Con esta sentencia tan sencilla tendremos nuestro servidor funcionando. Para arrancarlo debemos ejecutar en la consola lo siguiente:

	gulp connect

Tareas en gulp

La forma de importar módulos y crear tareas es similar para cualquier módulo.

	gulp.task('NombreDeLaTarea',function(){

		//Lo que debe hacer la tarea
		
	})

Para ejecutar una tarea cualquiera debemos ejecutar lo siguiente:

	gulp NombreDeLaTarea

Por otro lado, existe una tarea por defecto que es la que se ejecuta si solo ejecutamos:

Tarea por defecto

	gulp

Esta tarea se puede defirnir a través de la siguiente sintaxis:

	gulp.task('default', function(){

		//Tarea por defecto

	});

Tareas vinculadas

Además podemos tambien hacer que se ejecuten ciertas tareas antes de ejecutar la nuestra vinculándolas entre sí:

	gulp.task('NombreDeLaTarea',['Tarea1','Tarea2','Tarea3'],function(){

		//Lo que debe hacer la tarea
		
	})

Donde Tarea N son las tareas que deben haberse ejecutado antes de ejecutar nuestra tarea.

Tareas maestras

Ya por último, podemos hacer tareas "maestras" cuyo único cometido sea la de ejecutar un conjunto de tareas. Por ejemplo:

	gulp.task('NombreDeLaTarea',['Tarea1','Tarea2','Tarea3']);

Tarea Watch

Existen un tipo de tareas especiales llamadas watch que lo que nos permiten es detectar si alguno de los archivos que estan en cierta ruta han sufrido algún cambio, y en caso afirmativo ejecutar una tarea concreta. Esto, por ejemplo, nos puede permitir que cuando modificamos un archivo CSS se ejecute automaticamente la tarea de CSS que hayamos creado sin necesidad de lanzarla de forma manual.

Vamos a ver algunos ejemplos:

	gulp.watch('src/jade/**/*.jade', ['html']);
	gulp.watch('src/sass/**/*.scss', ['styles']);
	gulp.watch('src/javascript/**/*.js', ['compressJS']);

Estas tareas detectan cuando algun archivo jade, scss, o js de las rutas especificadas sufre algún cambio, y en caso de ser así lanza su correspondiente tarea.

Mover elementos

Entre las cosas que podemos hacer con Gulp está la de mover ficheros de una carpeta a otra, para ello podemos crear la siguiente tarea:

	var origen = '/html/**/*.html'
	var destino = '/dist'

	gulp.task('html', function() {
		return gulp.src(origen)
		.pipe(gulp.dest(destino))
	});

Esta tarea obtendría todos los archivos con extensión .html y los copiará en la carpeta /dist.

Es muy importante que entedáis lo que hacen las funciones .src y .pipe ya que será la base de muchas de las tareas que haréis.

Y hasta aquí llega nuestro tutorial básico de Gulp pero antes de terminar pensad lo siguiente: cualquier cosa que queráis hacer en vuestro proyecto, lo más probable es que ya exista un módulo en gulp que ya lo haga: minificar, servidor, enrutamiento, concatenar archivos en uno solo, test unitarios, internacionalización, un sin fin de etc...

Probad Gulp y no podréis parar de usarlo.