HEADER_lecciones_de_software

Gulp.js - Tutorial básico y primeros pasos para crear un proyecto

por Ricardo Caicedo, el 15 de septiembre de 2016

Gulp.js - Tutorial básico y primeros pasos para crear un proyecto

En un sentido filosófico debemos comprender que en esta vida no podemos hacerlo todo solo. Y eso es una de las cosas que nos enseña Gulp en este mundo informático revolucionario que avanza a pasos agigantados.

En esta nueva serie de tres episodios vamos a intentar contarte las cosas más interesantes de Gulp. Solo lo hacemos por ti, porque queremos que seas tan geek como nosotros. Vamos a ir paso por paso conociendo todas las bondades que este automatizador de tareas puede hacer por nosotros. De esta forma seremos cada vez más felices. 

Gulp.js, ¿qué es?

No podemos empezar de otra manera que detallando que es Gulp. Como lo mencionamos arriba, Gulp es una herramienta para automatizar tareas. Tan simple como eso: Gulp llegó a hacernos la vida más fácil. A que esas tareas repetitivas que estamos cansados de hacer una y otra vez Gulp las haga por nosotros con mayor velocidad y precisión. 

¿Qué tareas puedo automatizar con Gulp.js?

Con Gulp.js puedemos optimizar muchas, la mayoría en la capa front-end, debido a que se encuentra desarrollado en javascript y trabaja sobre Node Js. 

Gulp.js vs Grunt 

Hace algún tiempo con mi compañero Jhon López estuvimos trabajando en un proyecto en que usábamos Grunt, otra herramienta para automatizar tareas, muy buena y fácil de usar como lo es Gulp.

Existen algunas diferencias notorias que hacen que me incline actualmente por Gulp, entre ellas podemos destacar su forma de trabajar. En Gulp es más rápida la forma de ejecutar las tareas, ya que realiza una ejecución tras otra sin necesidad de leer y editar constantemente en la memoria. Gulp puede ejecutar una tarea tras otra sin editar con frecuencia para pasar a la siguiente. Lee: 5 ventajas de automatizar un proceso de negocio

Por otro lado, Grunt realiza llamados periódicos al archivo con el fin de poder leer y editar los cambios que está realizando.

Otra de las razones para elegir Gulp es el hecho de poder segmentar nuestras tareas al momento de crearlas. Esto permite un mejor orden del proyecto que estamos realizando. 

Empieza con instalar Node.Js 

Vamos hacer cosas interesantes ahora. En principio, como les mencionábamos, Gulp trabaja sobre Node JS. Sí, exacto, tienes razón, debemos tener instalado previamente Node Js en nuestro equipo, así que, si no lo tienes instalado, ingresa acá, descarga e instala Node. Indistintamente de la plataforma en la que te encuentres (Mac o Windows) podrás instalarlo sin ningún problema. 

Una vez tengamos instalado Node Js, vamos a hacer uso de un componente fundamental que viene con la instalación de Node, su nombre es npm. Este se convertirá en tu mejor amigo de ahora en adelante cuando sientas deseos de hacer desarrollos más geniales. 

Vamos a instalar Gulp de manera global en nuestro equipo, así que vamos a nuestra línea de comandos (terminal, command prompt) y ejecutamos la siguiente línea:

npm install -g gulp

Con esa línea le estamos diciendo a Node que instale Gulp de manera global en todo nuestro equipo, de tal forma que podamos hacer uso de él en el lugar que queramos. Ya con Gulp instalado pasas a formar parte de una comunidad más interesante: estás haciendo del mundo un mejor lugar.  :)

Crear un proyecto en node.js

Vamos a un lugar en nuestro equipo donde crearemos nuestro proyecto. Desde la línea de comandos vamos a ejecutar el siguiente mando: 

npm init

Con esto Node.js nos va hacer varias preguntas acerca de las características de nuestro proyecto, tales como nombre, versión, descripción, entre otras.

Procedemos a responder todas los ítems y, una vez finalizado nuestro proyecto, ya estará creado. 

Podemos notar que en la carpeta donde creamos el proyecto tenemos ahora un archivo llamado package.json. En este archivo vamos a ver las características resaltantes del proyecto que hemos creado. Parte de ellas porque las hemos suministrado nosotros mismos. 

Instalar nuestro primer plugin 

Como lo mencionábamos antes, Gulp trabaja con diversas tareas automatizadas que nos van ayudar a hacer la vida más fácil. Para ejecutarlas hace uso de plugins con propósitos específicos. 

Pues bien, en ese orden de ideas, vamos a instalar nuestro primer plugin del proyecto y el más importante de todos. Dentro de la carpeta del proyecto en la línea de comandos vamos a ejecutar los siguiente: 

npm install --save-dev gulp

Ustedes se preguntarán por qué es necesario volver a instalar Gulp. Bien, lo que hicimos antes fue instalarlo de manera global en nuestro equipo, pero en esta oportunidad le estamos diciendo que lo instale dentro del proyecto en el que lo vamos a usar. 

Por otro lado, si se fijan, hemos colocado el comando –save-dev. Dicho comando nos almacena el plugin de npm que estamos utilizando en el proyecto con la versión adjunta. ¿Dónde lo hace? Vamos al archivo package.json y vemos que tenemos una nueva llave llamada devDependencies. En esta estructura se van a ir almacenando todas las dependencias que vayamos instalando. 

Esto último nos ayuda de gran forma, ya que, si estamos trabajando en equipo con otras personas, estas solo tienen que tener el archivo package.json y por línea de comandos ejecutar:

Npm install 

Automáticamente, Node revisará el archivo package y descargará todos los plugins que señale el proyecto con la versión indicada. Estos plugins los instalará dentro de la carpeta node_modules, igual a la que tienes actualmente en tu proyecto en este momento. 

Conocer nuestro archivo gulpfile.js 

Con lo anterior es suficiente para empezar a crear tareas en Gulp. Ahora vamos a crear dentro del mismo fichero del proyecto un archivo al que llamaremos gulpfile.js. Dicho archivo va a ser nuestra central para crear todas las tareas que necesitemos de gulp. 

Para cerrar este primer episodio vamos a hacer el tradicional “Hola Mundo” que hacen todos los geeks como nosotros para sentirse bien con la vida. 

Lo primero que vamos hacer es invocar los plugins por utilizar. En este caso, solo vamos a invocar al más importante, Gulp. La primera línea que colocamos es la siguiente:

//gulpfile.json
var gulp = require('gulp');

Con eso decimos que vamos a hacer uso del plugin Gulp bajo la variable Gulp. Acto seguido vamos a crear nuestra tarea. Debemos darles un nombre a nuestras tareas. 

Sin embargo, en este caso vamos a usar un nombre por defecto: se llamará default y debe tener la siguiente estructura: 

gulp.task('default', function() {
   console.log('Hola Geek');
});

La razón por la que tiene ese nombre es que Gulp te permite colocar el nombre de las tareas como lo desees. No obstante, debemos tener siempre una tarea por defecto que Gulp ejecutará cuando no se le informa qué tarea en particular debe accionar. Más adelante veremos otras tareas con nombres distintos y más específicos.

Bien, ahora vamos a nuestra línea de comandos en el mismo nivel en el que tenemos nuestro archivo gulpfile (es importante que recuerdes eso) y ejecutamos el siguiente comando: 

Comando Gulp

Con ese comando él busca la tarea por defecto, y debe salir en nuestra terminal la frase que hemos puesto. 

Y así de simple es instalar Gulp y ejecutar nuestra primera tarea. Si crees que este primera tarea es sencilla y no ayuda para nada, pues tranquilo, apenas estamos empezando. En el siguiente episodio vamos a usar plugins más robustos para que empieces a parecer un geek interesante. 

Por ahora este servidor se despide. Si tienen alguna duda sobre esta entrada, no dudes en contactarnos.

Conoce las claves para tener una transformación digital ágil

Temas:Tecnologia e Innovacion

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal