Gulp.js – Instalación y primeros pasos

¿Qué es gulp.js ?

Con el nacimiento de node js surgieron una infinidad de herramientas y librerías, la capacidad de trabajo que se puede lograr con javascript utilizando node nos dio a los desarrolladores muchas herramientas para poder incrementar nuestra productividad.

Muchas de estas herramientas se han mantenido y han ido creciendo con el paso de los tiempos tomando cada día más fuerza y aumentando su capacidad de alcances. Dentro de estas herramientas se encuentran aquellos para automatizar procesos, que se enfocan principalmente en ayudarnos a realizar aquellas tareas repetitivas que se podrían convertir en una perdida de tiempo al momento de trabajar en nuestros proyectos, tales como: compresión de Assets y minificado de assets (JS, CSS, Imágenes) y compilación de SASS.

Uno de los mas conocidos y mi favorito al trabajar es gulp.js, este post es el inicio de una miniserie en donde te enseñaremos a utilizar gulp de manera profesional para mejorar tu productividad en tus desarrollos web. En este post te enseñaremos a instalar y preparar tu entorno de trabajo para poder utilizar gulp.js

Instalando Node.js

Gulp.js funciona con node.js por lo tanto lo primero que vamos a realizar es instalar Node y el gestor de paquetes de Node.js npm

Descargamos el instalador correspondiente a nuestro sistema operativo desde la web oficial de Node. https://nodejs.org, y seguímos los pasos indicados.

Comprobamos que la instalación de Node se haya realizado de forma correcta, ejecutando los siguientes comandos:

#Comprobando la instalación de node
$ node -v 
v14.15.5

#Comprobamos que el gestor de paquetes este instalado de forma correcta
$ npm -v
6.14.11

Instalando gulp

Instalaremos gulp de manera global, esto quiere decir que ejecutaremos la instalación solo una vez y de esta manera estará disponible para todos los proyectos que realicemos en el futuro.

$ npm install --global gulp-cli

Configurando el proyecto

Para comenzar a trabajar, crearemos un directorio que será el contenedor de nuestro proyecto, en este caso creamos una carpeta llamada miPrimerProyecto

Abrimos una terminal con la ruta de la carpeta que acabamos de crear, y ejecutamos el siguiente comando.

$ npm init

Esto inicializará un nuevo projecto npm en nuestra carpeta, nos solicitará unos cuantos parametros para personalizar el proyecto, colocamos los siguientes y presionamos Enter

package name: mi-primer-proyecto-gulp
version: (1.0.0) #presionamos enter para aceptar el valor por default
description: Este es mi primer peoyecto gulp
entry point: gulp.js
test command: # dejamos en blanco y presionamos enter
git repository:  # dejamos en blanco y presionamos enter
keywords: # dejamos en blanco y presionamos enter
author: # dejamos en blanco y presionamos enter

Si todo salio bien tendrás un nuevo archivo en tu proyecto con el nombre package.json, este archivo es utilizado por node para almacenar todos los paquetes que el proyecto utilizará.

Ahora agregaremos gulp.js a nuestro projecto utilizando el manejador de paquetes de node.

$ npm install --save-dev gulp 

Utilizamos --save-dev para que este paquete quede registrado como paquete del projecto en el package.json, ahora esté ultimo archivo, deberá verse de la siguiente manera:

Si eres observador notarás que se ha creado una carpeta nueva llamad node_modules, esta carpeta es utilizada por npm para almacenar todos los archivos que correspondan a sus paquetes, por el momento no será de mucha importancia, a menos para nosotros.

Configurando mi primer script gulp

Listo, ya tenemos todo creado para comenzar a trabajar y crear nuestro primer script gulp, ahora necesitamos crear un archivo extra, que es en donde se almacenarán las instrucciones que nosotros le proporcionaremos a gulp, basta con crear un nuevo archivo en nuestro proyecto llamado gulpfile.js y le agregamos el siguiente contenido:

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

Ahora solo bastaría con ejecutar el siguiente comando desde la consola.

$ gulp

Si todo se encuentra bien configurado deberíamos ver una salida en consola similar a la siguiente:

Y listo, ya tenemos configurado nuestro primer proyecto para comenzar a trabajar con gulp, en el siguiente post, veremos como podemos automatizar algunas tareas utilizando gulp.js

Espero que este post te haya servido y no olvides dejarnos tus dudas y/o comentarios, nos vemos en la próxima.