El gestor de tareas gulp

Iniciamos en este artículo el estudio de una potente herramienta basada en Node JS y EcmaScript 6 para facilitar el desarrollo de nuestros proyectos web. Se trata de gulp (https://gulpjs.com/). ¿Qué es gulp? En palabras tanto de su sitio oficial como de la comunidad de desarrolladores, gulp es un gestor de tareas. Y ¿qué es, en el contexto del desarrollo web, un gestor de tareas? Es una herramienta que nos permite llevar a cabo distintas tareas, más o menos rutinarias, de una forma automatizada, tanto en diferido como en tiempo real durante el desarrollo. Por ejemplo, supongamos que estamos creando un sitio web, y estamos escribiendo los estilos usando SASS, LESS o SCSS. Cada vez que queremos hacer un cambio, no queremos tener que recompilar el código de los estilos a CSS (que es el único formato en que pueden emplearse en la web). O cada vez que generemos un nuevo código javascript no queremos tener que minificarlo de nuevo para su implantación en producción. Un gestor de tareas como gulp se encarga de llevar a cabo todos esos trabajos de una forma automatizada, liberándonos de tener que hacerlos nosotros mismos.

PRERREQUISITOS PARA INSTALAR GULP

Para instalar el gestor de tareas gulp es necesario tener, en nuestro ordenador de desarrollo, Node JS y npm (Node Package Manager). Para ello iremos a la página de Node JS (https://nodejs.org/es/) y descargaremos Node JS para nuestro sistema operativo (existen versiones para Windows, Mac y Linux). Una vez instalado el que nos corresponda, debemos asegurarnos de que npm esté disponible en las variables de entorno (si estamos usando Windows), para que esté accesible desde todo nuestro equipo. Para ello, abriremos el panel de control, iremos a Sistema, Configuración avanzada del sistema, Variables de entorno y buscaremos, tanto en las globales para todos los usuarios, como en las de nuestro usuario en particular, la variable Path (o PATH, en el caso de las variables para todos los usuarios). Deberemos asegurarnos de que se incluya la ruta C:\Users\Usuario\AppData\Roaming\npm;, donde Usuario es tu nombre de usuario. Si no lo está, inclúyela, añadiéndola a las que ya hay (sin quitar ni reemplazar nada). Finalmente, acepta los cambios y, si tu versión de Windows es 7 o anterior, reinicia tu ordenador.

Una vez instalado, abre la consola (sí, esa, la ventanita negra donde se teclean comandos) y escribe:

npm --version

Si te responde con el número de versión de npm, estés en el directorio que estés, npm ya está instalado. Si te sale un error, indicándote que no se reconoce el comando, deberás resintalar Node JS.

INSTALANDO GULP

Ya con npm instalado correctamente, vamos a instalar gulp. En primer lugar, es necesario instalarlo de forma global en todo el equipo, tecleando, en la consola de mandatos, lo siguiente:

npm install -g- gulp

Si tu ordenador es Mac o Linux es posible que tengas que teclear, en lugar de lo anterior,

sudo npm install -g gulp

Esta instrucción hace que npm descargue e instale gulp en tu ordenador. El modificador -g hace que se instale de forma global (visible desde cualquier parte del equipo). Insisto en este punto porque, llegado el momento, también tendremos que hacer una instalación de gulp en cada proyecto que iniciemos, pero de eso ya hablaremos. Cada cosa en su momento.

Ahora comprobaremos que gulp está correctamente instalado en nuestro sistema, de un modo similar a como hicimos con npm. Teclea en tu consola lo siguiente:

gulp --version

Si todo está bien, te aparecerá la versión de gulp que tienes instalada.

CREANDO UN NUEVO PROYECTO

Vamos a empezar creando un nuevo proyecto para comprobar que gulp esté funcionando y respondiendo correctamente. Para ello crearemos, dentro de nuestro servidor local, un directorio raíz del proyecto, al que llamaremos, por ejemplo, prueba_gulp. En mi caso, como utilizo xampp sobre Windows, la ruta completa es c:/xampp/htdocs/prueba_gulp. Si tu usas otro servidor local, u otro sistema operativo, tu ruta podría ser diferente. En todo caso, el directorio ponlo con el nombre que desees.

Ahora tenemos que abrir la consola de mandatos dentro de la ruta raíz de nuestro proyecto, y crear un fichero llamado package.json, que contendrá las dependencias npm necesarias para usar gulp. Para ello empleamos el comando npm init (no lo teclees aún). Este comando nos va a hacer una serie de preguntas, a las que deberemos responder de modo afirmativo (algo equivalente, aunque salvando las distancias) al famoso «Aceptar, Aceptar, …» de las instalaciones de Windows. En la consola, dentro de la raíz del proyecto teclea:

npm init -y

El modificador -y evita esas preguntas, asumiendo la respuesta afirmativa a todas. Es una forma de simplificar el proceso.

Con esto se ha creado el archivo package.json, cuyo contenido será similar al que ves a continuación:

Lo siguiente que tenemos que hacer es instalar gulp para este proyecto en particular. Esto no tiene nada que ver con el hecho de que gulp ya exista, de modo global, en nuestro equipo. Para cada proyecto donde vayamos a usarlo deberemos instalarlo de modo, digámoslo así, local al proyecto. Además, en la instalación debemos especificar que gulp deberá estar disponible sólo para desarrollo. Al ser una herramienta para gestión de tareas durante el desarrollo, no deberá estar disponible para producción. Lo hacemos tecleando, en la consola, el siguiente mandato:

npm install --save-dev gulp

Dentro de la carpeta raíz del proyecto se ha creado un directorio llamado node_modules. Lo que hay dentro no nos interesa, y no debemos tocarlo. Simplemente, te lo comento para que no te llame la atención. Además, se ha creado un archivo adicional, llamado package-lock.json. Es un archivo de respaldo a package.json, que podemos utilizar en su momento, o podemos tener que borrar, si llega el caso. Por ahora lo dejaremos ahí. Lo que realmente nos importa es el cambio sufrido por package.json. Su aspecto es ahora similar al siguiente:

Observa las líneas resaltadas, donde se detalla la dependencia creada para desarrollo (devDependencies) del paquete gulp. Con esto ya tenemos preinstalado el proyecto para empezar a trabajar.

CONCLUYENDO

En este artículo hemos aprendido a instalar Node JS y npm en nuestro ordenador. También hemos aprendido a instalar gulp de forma global al equipo y local a un proyecto específico. En el próximo artículo aprenderemos un uso básico de gulp, con un mini proyecto de ejemplo.

   

Deja un comentario