Gulp vs. Grunt: dos task runners y sus características

Los desarrolladores web no solo se enfrentan a tareas complejas que deben resolver, sino que también lidian a diario con procesos repetitivos muy laboriosos. Tal es el caso, por ejemplo, de la compilación de archivos Less y SCSS en CSS. Además de requerir mucho tiempo, esta fase también puede traer de cabeza a la persona que se encarga de ello. Para alivio de los programadores se han desarrollado los conocidos como task runners, encargados de la automatización de estos procesos. Existen diversas aplicaciones, especialmente para los entornos JavaScript, entre las que Grunt y Gulp constituyen los representantes más llamativos. Pero ¿qué es lo que hace tan especiales a estos task runners y en qué se diferencian uno de otro?

¿Qué es un task runner?

Con el término task runner se hace referencia a un programa encargado de automatizar procesos informáticos que, sin su uso, deberían realizarse manualmente, considerándose por este motivo de gran valor en las tareas repetitivas. Al optimizar el flujo de trabajo, se tarda menos en realizar estas tareas y en consecuencia se dispone de más tiempo para dedicárselo a otras. Los dos aspectos básicos que diferencian a las diferentes soluciones son, por un lado, el modo en que se programan y, por otro, la forma de trabajar internamente. Al mismo tiempo, el usuario va a tener siempre el control sobre las fases del trabajo que se quieren automatizar y las que no.

Estas herramientas se consideran de gran utilidad sobre todo en el desarrollo web, pues los programadores de frontend tienen que enfrentarse a diario a procesos simples pero a su vez laboriosos y repetitivos: compilar un preprocesador de hojas de estilo (Less, Sass, SCSS) en un CSS terminado o ejecutar la minificación de códigos JavaScript. Del mismo modo, probar la funcionalidad de módulos individuales exige normalmente más tiempo del que se dispone, motivo que explica por qué son imprescindibles estas soluciones y cómo contribuyen a mejorar el ritmo de trabajo. Entre ellas, los task runner de JavaScript, basados en Node.js, gozan de cierta popularidad. Las opciones de automatización de cada programa se pueden ampliar con un gran número de plugins.

Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.

Grunt vs. Gulp: comparativa de dos task runners de Java

Los entornos JavaScript disponen de diferentes task runners cuya diferencia principal se basa en la forma en la que se inicia el proceso de automatización. Por un lado, hay programas que disponen desde el principio del código necesario para ejecutar los procesos correspondientes. El usuario configura en este caso la tarea que quiere realizar de forma automática, esto es, sin tratar con el código del programa. Por el otro, se encuentran los task runners de JavaScript que posicionan la programación en un primer plano, ofreciendo al usuario más libertad para la creación de los propios scripts de automatización.

Entre las aplicaciones más populares, junto a Broccoli.js y Brunch se encuentran Gulp y Grunt. Sus características, similitudes y diferencias se muestran a continuación.

¿Qué es Grunt?

En 2012 Ben Alman, programador de JavaScript, dio a conocer el task runner de línea de comandos Grunt y desde entonces continúa desarrollándolo junto a un pequeño equipo. El código del programa está disponible con licencia de software libre MIT y puede descargarse de las webs oficiales, aunque también está a disposición de los usuarios en la plataforma de programadores GitHub. Grunt, al igual que todas las herramientas similares, se basa en el entorno en tiempo de ejecución Node.js de JavaScript y dispone de grunt-cli, una interfaz de línea de comandos que se instala, como el mismo task runner, con el gestor de paquetes npm (Node Package Manager).

Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.

Para integrar Grunt en un proyecto web se deben añadir dos archivos al directorio raíz del proyecto. El archivo package.json contiene todos los metadatos relevantes (nombre, versión, licencia o dependencia a ella) de las tareas que pueden automatizarse. En el archivo Grunt, escrito en JavaScript (gruntfile.js) o CoffeeScript (gruntfile.coffee) válido, se incluye el código original con el que se integran y configuran los módulos de cada una de las tareas. Estos, también llamados plugins, se instalan con el gestor de paquetes npm.

El directorio oficial de plugins cuenta con más de 6.000 tareas para las más diversas finalidades, como son grunt-contrib-clean para ordenar directorios y archivos, grunt-contrib-cssmin para la minificación de CSS o grunt-contrib-connect para iniciar un servidor local. Muchos de estos plugins no son más que interfaces para las herramientas independientes ya que, por ejemplo, grunt-contrib-uglify permite manejar al minificador de JavaScript UglifyJS desde el archivo de Grunt.

Nota

La lista de plugins se genera automáticamente desde la base de datos de módulos npm. Los plugins Grunt, que además están marcados con “contrib”, son extensiones respaldadas oficialmente por el equipo de programadores. Se pueden reconocer por una indicación en forma de estrella.

Además, todo programador versado puede, además de modificar o ampliar las tareas que ya existen, crear sus propios módulos de automatización para adaptar de la mejor forma posible el task runner a sus necesidades.

¿Qué es Gulp?

La empresa de software estadounidense Fractal Innovations sacó al mercado en julio de 2013 la primera versión del task runner libre Gulp gracias al trabajo conjunto con la comunidad de programadores GitHub. Al igual que Grunt, este programa está disponible con una licencia de código abierto MIT y se basa en la plataforma de JavaScript Node.js. Como su competidor, recurre al gestor de paquetes npm y apenas difiere de este en términos de estructura: dado que Gulp también es una herramienta de línea de comandos, posee la interfaz de usuario para ello, esta es, gulp-cli. Además, recurre por norma general a package.json como archivo de configuración y al archivo Gulp (gulpfile.js), que especifica las tareas posibles. Una vez añadidos al directorio web es posible usar el task runner para la optimización del ritmo de trabajo.

Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.

El archivo Gulp, que solo contiene JavaScript, agrupa las operaciones de archivos para que se puedan ejecutar con el módulo de Node.js stream. Cada proceso stream se ejecuta en su mayor parte en la memoria principal antes de que el resultado se escriba de nuevo en cada archivo. Todo ello hace que este task runner destaque por su excelente rendimiento, aunque es esencial tener conocimientos de Node.js y JavaScript para usarlo, pues las tareas están programadas desde un principio pero no configuradas. Para los más expertos esto implica una gran libertad, que a su vez conlleva un alto potencial de error.

También existen plugins para Gulp con gran cantidad de tareas ya preparadas. El directorio oficial gulpjs.com dispone de más de 3.000 extensiones diferentes, por ejemplo, gulp-jekyll para la compilación de proyectos Jekyll, gulp-php-minify para la optimización de códigos PHP o gulp-cssmyicons para la transformación de los iconos SVG en CSS.

Gulp vs. Grunt: similitudes y diferencias

Como Grunt y Gulp comparten una serie de características da la sensación de que no hay ninguna diferencia entre estas herramientas. Ambas poseen la licencia MIT, lo que quiere decir que son programas de código abierto puestos a disposición de los usuarios. Además, las dos se pueden manejar con una línea de comandos y disponen para ello de una interfaz que se instala con el software. Asimismo, con npm recurren al mismo gestor de paquetes y pueden automatizar un sinnúmero de tareas gracias al amplio directorio de plugins del que disponen. En caso de que no resultara de utilidad ninguna de las extensiones disponibles, ambas herramientas permiten programar la tarea que se quiere realizar, aunque su estructura exige que se disponga de conocimientos de JavaScript y Node.js.

Sin embargo, mientras Gulp recurre en primer lugar al módulo stream de Node.js, Grunt utiliza principalmente el módulo fs (file system), lo que supone una de las diferencias más notables entre ambas herramientas. Grunt está estrictamente orientada a los archivos, creándolos de forma temporal y local como resultado de las tareas ejecutadas. Por el contrario, Gulp lleva a cabo los procesos en la memoria principal y escribe directamente en los archivos, lo que proporciona una mayor velocidad al programa.

Otro rasgo de diferenciación es el concepto que rodea a cada una de las dos soluciones. La programación de Grunt dirige a los usuarios, porque ya se han definido muchas tareas que solo habría que configurar. Por el contrario, Gulp otorga una mayor libertad al programador, pues solo provee módulos individuales, lo que facilita la comprensión de los contextos y las relaciones pero a su vez exige un mayor esfuerzo. Cuanto mayor es el proyecto, más destacan los puntos fuertes de Gulp, motivo por el que supone para muchos la primera opción. Debido a su mayor simplicidad, Grunt tiene su razón de ser en proyectos más pequeños y manejables.

Grunt vs. Gulp: comparativa tabulada

 

Grunt

Gulp

Año de publicación

2012

2013

Página web

gruntjs.com

gulpjs.com

Ejecutable con

Línea de comandos

Línea de comandos

Basado en

Node.js

Node.js

Concepto

Configuración antes que programación

Programación antes que configuración

Ejecución del proceso

Local (archivos temporales)

En la memoria principal

Formato del archivo base

JavaScript (en su mayoría declaraciones en el estilo JSON)

JavaScript

Gestor de paquete

npm

npm

Interfaz de línea de comandos

grunt-cli

gulp-cli

Plugins

Más de 6.000

Más de 3.000

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración de su navegador en nuestra. Política de Cookies.