¿Qué es Gulp?
lunes, septiembre 01, 2014 1 Comments

Gulp es un automatizador de tareas, el cual ha crecido muchísimo estos últimos meses, probablemente muchos aún no lo conozcan, puede que para ustedes, es mucho más común haber escuchado "Grunt", pero sigue la misma filosofía: automatizar tareas, gestionarlas. Gulp está basado en NodeJS, sin embargo, eso no significa que tengas que saber o tocar Node para manejar Gulp, ya que lo único que necesitarás previo a instalar Gulp, será tener instalado Node y npm (node package manager). Eso sí, necesitas saber al menos lo básico de JavaScript, sin embargo, conforme lo vayas utilizando te darás cuenta cómo se volverá parte de tu día a día.
Antes de comenzar con la instalación, basta comentar que con Gulp podremos gestionar muchos de los procesos que se deben de realizar al momento de pasar de la etapa de Desarrollo a Producción, cuestiones tales como lo son la minificación de archivos CSS, compresión de JavaScript, optimización de imágenes, inclusive nos permite realizar las tareas anteriores sin tener que estar compilando una y otra vez, gracias a un monitoreo (watch), podemos verlo así, tenemos un guardián al cual le decimos las tareas que hemos creado, el guardián estará observando y ejecutará los debidos procesos.
Lo primero que necesitarás, será instalar Gulp de manera global y local para tu package.
Para ello, escribes el siguiente comando:

:npm install -g gulp

El siguiente paso te facilitará la cuestión de agregar o instalar Gulp, que será mediante el fichero de Package.json

:npm init

Digamos que esta es la estructura básica que tendrás en tu fichero de Package.json

{
  "name" : "nombre-de-mi-proyecto",
  "version": "0.0.0",
  "dependencies": "otras-dependencias-instaladas"
}

Para guardar gulp dentro del fichero escribes:

:npm install -g gulp --save-dev

Con ello, si revisas tu fichero de Package.json verás cómo se modifica su contenido:

"devDependencies": {
"gulp": "^3.8.6"
}

Lo siguiente, será crear un archivo llamado "gulpfile.js".

var gulp = require('gulp');

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

Estupendo, ahora tienes la estructura básica de una tarea, que en realidad hasta el momento, no hace absolutamente nada.
Para correr una tarea en Gulp, basta con escribir gulp o gulp ['nombre de la tarea']

:gulp

En el próximo post, veremos cómo hacer la parte funcional por parte de Gulp, minificar los archivos de CSS, imágenes y la compresión de JavaScript.
Un saludo. (: