Gulp vs. Grunt: dos task runners y sus ca­ra­c­te­rí­s­ti­cas

Los de­sa­rro­lla­do­res web no solo se enfrentan a tareas complejas que deben resolver, sino que también lidian a diario con procesos re­pe­ti­ti­vos muy la­bo­rio­sos. Tal es el caso, por ejemplo, de la co­m­pi­la­ció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 pro­gra­ma­do­res se han de­sa­rro­lla­do los conocidos como task runners, en­ca­r­ga­dos de la au­to­ma­ti­za­ción de estos procesos. Existen diversas apli­ca­cio­nes, es­pe­cia­l­me­n­te para los entornos Ja­va­S­cri­pt, entre las que Grunt y Gulp co­n­s­ti­tu­yen los re­pre­se­n­ta­n­tes más lla­ma­ti­vos. Pero ¿qué es lo que hace tan es­pe­cia­les a estos task runners y en qué se di­fe­re­n­cian uno de otro?

Con el término task runner se hace re­fe­re­n­cia a un programa encargado de au­to­ma­ti­zar procesos in­fo­r­má­ti­cos que, sin su uso, deberían rea­li­zar­se ma­nua­l­me­n­te, co­n­si­de­rá­n­do­se por este motivo de gran valor en las tareas re­pe­ti­ti­vas. Al optimizar el flujo de trabajo, se tarda menos en realizar estas tareas y en co­n­se­cue­n­cia se dispone de más tiempo para de­di­cár­se­lo a otras. Los dos aspectos básicos que di­fe­re­n­cian a las di­fe­re­n­tes so­lu­cio­nes son, por un lado, el modo en que se programan y, por otro, la forma de trabajar in­te­r­na­me­n­te. Al mismo tiempo, el usuario va a tener siempre el control sobre las fases del trabajo que se quieren au­to­ma­ti­zar y las que no.

Estas he­rra­mie­n­tas se co­n­si­de­ran de gran utilidad sobre todo en el de­sa­rro­llo web, pues los pro­gra­ma­do­res de frontend tienen que en­fre­n­tar­se a diario a procesos simples pero a su vez la­bo­rio­sos y re­pe­ti­ti­vos: compilar un pre­pro­ce­sa­dor de hojas de estilo (Less, Sass, SCSS) en un CSS terminado o ejecutar la mi­ni­fi­ca­ción de códigos Ja­va­S­cri­pt. Del mismo modo, probar la fu­n­cio­na­li­dad de módulos in­di­vi­dua­les exige no­r­ma­l­me­n­te más tiempo del que se dispone, motivo que explica por qué son im­pre­s­ci­n­di­bles estas so­lu­cio­nes y cómo co­n­tri­bu­yen a mejorar el ritmo de trabajo. Entre ellas, los task runner de Ja­va­S­cri­pt, basados en Node.js, gozan de cierta po­pu­la­ri­dad. Las opciones de au­to­ma­ti­za­ción de cada programa se pueden ampliar con un gran número de plugins.

Los entornos Ja­va­S­cri­pt disponen de di­fe­re­n­tes task runners cuya di­fe­re­n­cia principal se basa en la forma en la que se inicia el proceso de au­to­ma­ti­za­ción. Por un lado, hay programas que disponen desde el principio del código necesario para ejecutar los procesos co­rre­s­po­n­die­n­tes. El usuario configura en este caso la tarea que quiere realizar de forma au­to­má­ti­ca, esto es, sin tratar con el código del programa. Por el otro, se en­cue­n­tran los task runners de Ja­va­S­cri­pt que po­si­cio­nan la pro­gra­ma­ción en un primer plano, ofre­cie­n­do al usuario más libertad para la creación de los propios scripts de au­to­ma­ti­za­ción.

Entre las apli­ca­cio­nes más populares, junto a Broccoli.js y Brunch se en­cue­n­tran Gulp y Grunt. Sus ca­ra­c­te­rí­s­ti­cas, si­mi­li­tu­des y di­fe­re­n­cias se muestran a co­n­ti­nua­ción.

En 2012 Ben Alman, pro­gra­ma­dor de Ja­va­S­cri­pt, dio a conocer el task runner de línea de comandos Grunt y desde entonces continúa de­sa­rro­llá­n­do­lo junto a un pequeño equipo. El código del programa está di­s­po­ni­ble con licencia de software libre MIT y puede de­s­ca­r­gar­se de las webs oficiales, aunque también está a di­s­po­si­ción de los usuarios en la pla­ta­fo­r­ma de pro­gra­ma­do­res GitHub. Grunt, al igual que todas las he­rra­mie­n­tas similares, se basa en el entorno en tiempo de ejecución Node.js de Ja­va­S­cri­pt 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 integrar Grunt en un proyecto web se deben añadir dos archivos al di­re­c­to­rio raíz del proyecto. El archivo package.json contiene todos los metadatos re­le­va­n­tes (nombre, versión, licencia o de­pe­n­de­n­cia a ella) de las tareas que pueden au­to­ma­ti­zar­se. En el archivo Grunt, escrito en Ja­va­S­cri­pt (gruntfile.js) o Co­f­fee­S­cri­pt (gruntfile.coffee) válido, se incluye el código original con el que se integran y co­n­fi­gu­ran los módulos de cada una de las tareas. Estos, también llamados plugins, se instalan con el gestor de paquetes npm.

El di­re­c­to­rio oficial de plugins cuenta con más de 6.000 tareas para las más diversas fi­na­li­da­des, como son grunt-contrib-clean para ordenar di­re­c­to­rios y archivos, grunt-contrib-cssmin para la mi­ni­fi­ca­ción de CSS o grunt-contrib-connect para iniciar un servidor local. Muchos de estos plugins no son más que in­te­r­fa­ces para las he­rra­mie­n­tas in­de­pe­n­die­n­tes ya que, por ejemplo, grunt-contrib-uglify permite manejar al mi­ni­fi­ca­dor de Ja­va­S­cri­pt UglifyJS desde el archivo de Grunt.

Además, todo pro­gra­ma­dor versado puede, además de modificar o ampliar las tareas que ya existen, crear sus propios módulos de au­to­ma­ti­za­ción para adaptar de la mejor forma posible el task runner a sus ne­ce­si­da­des.

La empresa de software es­ta­dou­ni­de­n­se Fractal In­no­va­tio­ns sacó al mercado en julio de 2013 la primera versión del task runner libre Gulp gracias al trabajo conjunto con la comunidad de pro­gra­ma­do­res GitHub. Al igual que Grunt, este programa está di­s­po­ni­ble con una licencia de código abierto MIT y se basa en la pla­ta­fo­r­ma de Ja­va­S­cri­pt Node.js. Como su co­m­pe­ti­dor, recurre al gestor de paquetes npm y apenas difiere de este en términos de es­tru­c­tu­ra: dado que Gulp también es una he­rra­mie­n­ta 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 co­n­fi­gu­ra­ción y al archivo Gulp (gulpfile.js), que es­pe­ci­fi­ca las tareas posibles. Una vez añadidos al di­re­c­to­rio web es posible usar el task runner para la op­ti­mi­za­ción del ritmo de trabajo.

El archivo Gulp, que solo contiene Ja­va­S­cri­pt, agrupa las ope­ra­cio­nes 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 re­n­di­mie­n­to, aunque es esencial tener co­no­ci­mie­n­tos de Node.js y Ja­va­S­cri­pt para usarlo, pues las tareas están pro­gra­ma­das desde un principio pero no co­n­fi­gu­ra­das. 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 pre­pa­ra­das. El di­re­c­to­rio oficial gulpjs.com dispone de más de 3.000 ex­te­n­sio­nes di­fe­re­n­tes, por ejemplo, gulp-jekyll para la co­m­pi­la­ción de proyectos Jekyll, gulp-php-minify para la op­ti­mi­za­ción de códigos PHP o gulp-cs­s­m­yi­co­ns para la tra­n­s­fo­r­ma­ción de los iconos SVG en CSS.

Como Grunt y Gulp comparten una serie de ca­ra­c­te­rí­s­ti­cas da la sensación de que no hay ninguna di­fe­re­n­cia entre estas he­rra­mie­n­tas. Ambas poseen la licencia MIT, lo que quiere decir que son programas de código abierto puestos a di­s­po­si­ció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 au­to­ma­ti­zar un sinnúmero de tareas gracias al amplio di­re­c­to­rio de plugins del que disponen. En caso de que no resultara de utilidad ninguna de las ex­te­n­sio­nes di­s­po­ni­bles, ambas he­rra­mie­n­tas permiten programar la tarea que se quiere realizar, aunque su es­tru­c­tu­ra exige que se disponga de co­no­ci­mie­n­tos de Ja­va­S­cri­pt y Node.js.

Sin embargo, mientras Gulp recurre en primer lugar al módulo stream de Node.js, Grunt utiliza pri­n­ci­pa­l­me­n­te el módulo fs (file system), lo que supone una de las di­fe­re­n­cias más notables entre ambas he­rra­mie­n­tas. Grunt está es­tri­c­ta­me­n­te orientada a los archivos, creá­n­do­los de forma temporal y local como resultado de las tareas eje­cu­ta­das. Por el contrario, Gulp lleva a cabo los procesos en la memoria principal y escribe di­re­c­ta­me­n­te en los archivos, lo que pro­po­r­cio­na una mayor velocidad al programa.

Otro rasgo de di­fe­re­n­cia­ción es el concepto que rodea a cada una de las dos so­lu­cio­nes. La pro­gra­ma­ción de Grunt dirige a los usuarios, porque ya se han definido muchas tareas que solo habría que co­n­fi­gu­rar. Por el contrario, Gulp otorga una mayor libertad al pro­gra­ma­dor, pues solo provee módulos in­di­vi­dua­les, lo que facilita la co­m­pre­n­sión de los contextos y las re­la­cio­nes 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 si­m­pli­ci­dad, Grunt tiene su razón de ser en proyectos más pequeños y ma­ne­ja­bles.