Si eres como yo y estás empezando en esto de la programación y has intentado configurar tareas en tus proyectos para que se ejecuten de manera automática, seguramente habrás utilizado GulpJs o por lo menos haber escuchado de él. Con Gulp podemos escribir código en Sass y pasarlo a Css de una manera muy sencilla, también podremos comprimir ese mismo código utilizando uno de los tantos plugin que tiene.
Pero a todas estas ¿Qué es Gulp?
“gulp is a toolkit for automating painful or time-consuming task in your development workflow, so you can stop messing around and build something” que en castellano es “gulp es un conjunto de herramientas para automatizar tareas dolorosas o que consumen mucho tiempo en el desarrollo de tu flujo de trabajo, así puedes dejar de jugar y construir algo”, en pocas palabras Gulp nos ayuda a agilizar nuestro trabajo realizando una pequeña configuración inicial.
¿Existen otras herramientas que realizan este mismo trabajo?
Si, están Webpack y Grunt, cada una con sus ventajas y desventajas.
¿Cómo configurar un proyecto con Gulp?
La versión que se va utilizar para esta demostración es la V4.0.0 que hasta la realización de este post se encuentra en su versión beta, también utilizaremos Panini, Browser-sync y Babel.
Para comenzar con nuestro proyecto lo primero será crear la carpeta del proyecto, ubicarnos en ella y ejecutar el comando npm init para crear nuestro package JSON
$ npm init
Luego de creado nuestro package JSON, instalamos Gulp con el siguiente comando
$ npm install -D gulp@4.0.0
Asegurate que sea la versión 4, ya que la se instala por defecto es la 3.
"devDependencies": {
"gulp": "4.0.0"
}
Luego de esto instalamos las demás dependencias de desarrollo que necesitemos, en este caso Panini y Babel.
$ npm install -D panini
$ npm install -D gulp-babel @babel/core @babel/cli @babel/preset-env
recuerda crear un archivo .babelrc para especificar la versión que vamos a manejar de ESMACScript. Coloca el siguiente código dentro de del archivo creado.
{
"presets": ["es2015", "stage-2"]
}
Para más información mira la documentación de Babel.
Instaladas las dependencias de desarrollo instalamos browser-sync como dependencia del proyecto, la cual nos permitirá crear un servidor local desde el cual podemos ejecutar nuestro proyecto.
$ npm install browser-sync
Ya con esto tenemos lo necesario para empezar nuestro proyecto, comenzaré creando una carpeta llamada src donde estarán mi archivo index.html y demás carpetas secundarias
Esta disposición de carpetas es opcional pero debido a que vamos a usar panini es la mejor forma de organizar nuestra área de trabajo.
Por último, para que finalmente podamos empezar a trabajar en nuestro proyecto debemos crear nuestro archivo llamado gulpfile.js que en este caso como vamos a estar trabajando con la última versión de ES6 va llevar la extensión gulpfile.babel.js, de esta manera le decimos a gulp que use babel.
El nuevo archivo lo creamos en la carpeta principal de nuestro proyecto
Ahora si, empecemos con la configuración. Lo primero será importar nuestras herramientas de trabajo
Ahora reunir las partes de nuestros archivos html en un solo archivo html, que es el que estará listo para producción
Lo que está haciendo la anterior función es tomar todas nuestras páginas en html y unirlas en un solo archivo html.
Lo siguiente será pasar nuestros assets a la carpeta dist, en este caso solo las imagenes
Si se tiene archivos en sass estos son pasados a css con alguno de los plugin disponibles con que cuenta Gulp como gulp-sass, en este ejemplo solo voy a pasar los archivos Css a la carpeta dist
Lo mismo con los archivos en javascript
Si te diste cuenta, sino va haber cambios a los archivos originalmente trabajados, hubieras podido trasladarlos todos en una sola tarea.
La siguiente función sólo es necesario si se trabaja con panini, esta permitirá refrescar los cambios hechos a las páginas parciales.
En la siguiente función inicializamos el servidor local en el puerto 3000 o en el que se desee y le indicamos la carpeta que contiene todos nuestros archivos listos para ejecutarse.
Para que se vean reflejados los cambios que vamos haciendo en el proyecto a medida que vamos trabajando, debemos crear un escucha, con la siguiente función lo podemos hacer. A continuación entran en juego las novedades que trae Gulp en su versión 4, gulp series y gulp parallel, la primera ejecuta como su nombre lo indica una serie de funciones o tareas en un orden secuencial, si una de las funciones o tareas falla, se detiene la ejecución de la secuencia; la segunda como su nombre lo indica ejecuta funciones o tareas en paralelo, si una de estas falla, igual se termina de ejecutar la secuencia.
Creamos una tarea que nos permita ejecutar todas las funciones anteriores
Para terminar, seteamos la tarea final por defecto para así cuando llamamos el script gulp se ejecute todas las tareas relacionadas
Con esto ya tenemos nuestro archivo gulpfile terminado y podríamos dedicarnos a nuestro trabajo, delegando nuestras tareas a gulp.