Juan Pablo Prado

En este tutorial introduciremos Gulp, el corredor de tareas JavaScript. Le mostraremos lo que es un task runner, y cómo le podemos ahorrar un montón de tiempo de desarrollo, así como la construcción de su sitio para producción. Puedes ver la documentación en español.

Gulp es un sistema de construcción de proyectos, mediante el uso de la manipulación de archivos streams(flujos) de node.js todo está hecho en memoria, y un archivo no se escribe hasta que le indicas que lo haga. Como solían ser los build scripts de antes.

¿Por qué gulp.js?

Gulp es capaz de automatizar muchas de las tareas complicadas que todos  normalmente hacemos a diario, cosas como compilar Sass a CSS o Coffescript a JavaScript.

Un task runner hace lo que dice, realiza tareas por ti, y Gulp es el motor que puede correr tareas individuales predefinidas. Las tareas tipicamente son definidas en un archivo js o un conjunto de estos archivos, estas tareas luego pueden ser llamadas y ejecutadas por el motor Gulp, y estas tareas pueden correr una tras otra, donde las ultimas tareas dependen de las tareas pasadas. Las tareas tambien pueden correr todas al mismo tiempo en paralelo. e.g. Gulp puede concatenar scripts al mismo tiempo que compila Sass a CSS, esto pasa, por que las dos tareas no dependen la una de la otra, en absoluto.

Haremos referencia a las configuraciones de tareas como tuberías i.e. pipelines

Gulp es usado para manejar algunas tuberías bastante sofisticadas. Gente en Google, Netflix y un montón en otras empresas usan Gulp.

Instalación

Gulp es fácil de instalarlo y correrlo. Los pasos son:

1. Instalar Gulp globalmente
2. Instalar Gulp en devDependencies
3. Crear una gulpfile.js

El primer paso es conseguir Gulp instalándolo a nivel global.

$ npm install --global gulp

Después de eso, necesitarás Gulp como devDependencies en tus proyectos donde lo deseas utilizar. Asegúrate de tener el archivo package.json o créalo con el siguiente comando:

$ npm init -y

Una vez que tengas tu package.json, vamos a instalar Gulp en devDependencies con:

$ npm install --save-dev gulp

Y por último necesitas crear un gulpfile.js en la raíz del proyecto, el cual contiene tus tareas.

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});