Gulp e Grunt: le ca­rat­te­ri­sti­che dei due task runner

I web developer non si con­fron­ta­no soltanto con problemi complessi, ma devono spesso eseguire compiti ab­ba­stan­za noiosi, ri­pe­ti­ti­vi e ri­cor­ren­ti. Ope­ra­zio­ni come compilare Less e SCCS nei file CSS, oltre a essere alquanto snervanti, com­por­ta­no uno spreco di tempo prezioso. Per al­leg­ge­ri­re il compito degli svi­lup­pa­to­ri e au­to­ma­tiz­za­re i processi sono stati svi­lup­pa­ti i co­sid­det­ti task runner: in par­ti­co­la­re esistono diverse ap­pli­ca­zio­ni per gli ambienti Ja­va­Script, tra cui le più popolari sono Grunt e Gulp. Ma cosa rende questi due task runner per Ja­va­Script così speciali e in quali aspetti si dif­fe­ren­zia­no?

Un task runner è un programma in grado di au­to­ma­tiz­za­re uno o più processi che al­tri­men­ti do­vreb­be­ro essere eseguiti ma­nual­men­te. La sua funzione è quindi preziosa, spe­cial­men­te nel caso di quei task che devono essere ripetuti più e più volte. Ot­ti­miz­zan­do il workflow, un task runner ga­ran­ti­sce agli svi­lup­pa­to­ri più tempo a di­spo­si­zio­ne per lo svol­gi­men­to di altri compiti. Le dif­fe­ren­ze prin­ci­pa­li tra i diversi task runner risiedono so­stan­zial­men­te nel modo in cui sono pro­gram­ma­ti e fun­zio­na­no. In generale gli utenti hanno sempre la pos­si­bi­li­tà di definire quali task dovranno essere eseguiti dal tool e quali no.

Nel campo dello sviluppo web è di grande im­por­tan­za l’aiuto di questi strumenti: basti pensare alla sfida quo­ti­dia­na che i front end developer devono af­fron­ta­re quando eseguono processi semplici ma ri­pe­ti­ti­vi come la com­pi­la­zio­ne dei fogli di stile di un pre­pro­ces­so­re CSS (Less, Sass, SCSS) all’interno di file CSS già pronti o la mi­ni­miz­za­zio­ne del codice Ja­va­Script. Ma la sem­pli­fi­ca­zio­ne del workflow appare del tutto ne­ces­sa­ria anche se si considera quanto tempo richiede testare la fun­zio­na­li­tà dei singoli moduli, spesso ben più di quello ef­fet­ti­va­men­te a di­spo­si­zio­ne. I task runner per Ja­va­Script basati su Node.js si sono imposti come soluzione per au­to­ma­tiz­za­re i processi. Inoltre le pos­si­bi­li­tà di au­to­ma­zio­ne dei singoli programmi sono ampliate da numerosi plug-in.

Nell’ambiente Ja­va­Script esistono diversi task runner che si dif­fe­ren­zia­no tra loro in base al modo di ini­zia­liz­za­zio­ne dei processi di au­to­ma­zio­ne. Da un lato ci sono i programmi che hanno già a di­spo­si­zio­ne il codice ne­ces­sa­rio per avviare il relativo processo: in questo caso l’utente si limita a definire quale task delegare, senza occuparsi in prima persona della pro­gram­ma­zio­ne del codice. Dall’altro ci sono i task runner che puntano sulla pro­gram­ma­zio­ne, offrendo all’utente molta più libertà nella creazione dei propri script di au­to­ma­zio­ne.

A parte Broccoli.js e Brunch, le ap­pli­ca­zio­ni più popolari sono Gulp e Grunt. Di seguito ci occupiamo delle ca­rat­te­ri­sti­che di entrambi, con­cen­tran­do­ci sulle loro so­mi­glian­ze e dif­fe­ren­ze.

Lo svi­lup­pa­to­re Ja­va­Script Ben Alman ha pub­bli­ca­to nel 2012 il task runner Grunt, sul quale da allora ha con­ti­nua­to a lavorare insieme a un piccolo team. Il codice del programma è di­stri­bui­to con Licenza MIT e può essere scaricato dal sito ufficiale, oltre a essere uti­liz­za­bi­le gra­tui­ta­men­te sulla piat­ta­for­ma per svi­lup­pa­to­ri GitHub. Come tutti i tool della stessa tipologia, Grunt si basa su Node.js e dispone di una propria in­ter­fac­cia a linea di comando (grunt-cli), che come il task runner stesso può essere in­stal­la­ta tramite il gestore di pacchetti npm (Node Package Manager).

Per integrare Grunt all’interno di un progetto web, bisogna prima ag­giun­ge­re due file alla root del progetto. Di norma il file package.json contiene tutti i metadati dei task au­to­ma­tiz­za­bi­li come il nome, la versione, la licenza e le relative di­pen­den­ze. Nel Gruntfile, di­spo­ni­bi­le in Ja­va­Script (gruntfile.js) o Cof­fee­Script (gruntfile.coffee), è contenuto il codice che viene usato ef­fet­ti­va­men­te per integrare e con­fi­gu­ra­re i moduli in­di­vi­dua­li del task. I moduli, chiamati anche plug-in, possono essere in­stal­la­ti at­tra­ver­so il già citato gestore di pacchetti npm.

La plug-in directory contiene più di seimila task con scopi diversi, come ad esempio grunt-contrib-clean (pulizia di file e cartelle), grunt-contrib-cssmin (mi­ni­miz­za­zio­ne CSS) o grunt-contrib-connect (avvio di un web server locale). Molti di questi plug-in sono sem­pli­ce­men­te in­ter­fac­ce di tool autonomi: grunt-contrib-uglify permette ad esempio di con­trol­la­re il mi­ni­miz­za­to­re UglifyJS del Gruntfile.

Oltre alla pos­si­bi­li­tà di mo­di­fi­ca­re o estendere task esistenti, gli svi­lup­pa­to­ri esperti possono anche creare i propri moduli di au­to­ma­zio­ne per adattare il task runner alle proprie esigenze.

Nel luglio 2013 la società americana di software Fractal In­no­va­tions ha lanciato sul mercato, in col­la­bo­ra­zio­ne con la comunità GitHub, la prima versione del task runner gratuito Gulp. Al pari di Grunt, il programma è di­stri­bui­to con licenza open source MIT, è basato sulla piat­ta­for­ma Ja­va­Script Node.js e utilizza il gestore di pacchetti npm. Anche per quanto riguarda la struttura, Gulp non dif­fe­ri­sce molto da Grunt: si tratta sempre di un tool a riga di comando con in­ter­fac­cia utente gulp-cli. Di norma vengono uti­liz­za­ti i file di con­fi­gu­ra­zio­ne package.json e il Gulpfile (gulpfile.js), che elenca le possibili ope­ra­zio­ni. Ag­giun­gen­do entrambi alla web directory si può uti­liz­za­re il task runner per l’ot­ti­miz­za­zio­ne del workflow.

Il Gulpfile, che contiene esclu­si­va­men­te Ja­va­Script, riassume le singole ope­ra­zio­ni in modo che possano essere eseguite at­tra­ver­so il modulo stream di Node.js. La maggior parte dei singoli processi stream si svolge nella RAM, prima che i risultati vegano scritti alla fine nei ri­spet­ti­vi file. Questa è la ragione per cui le pre­sta­zio­ni del task runner sono ge­ne­ral­men­te ec­cel­len­ti. Dal momento che le ope­ra­zio­ni vengono pro­gram­ma­te sin dall’inizio, ma non con­fi­gu­ra­te, la co­no­scen­za di Ja­va­Script e Node.js è un requisito fon­da­men­ta­le per l’utilizzo di Gulp. Questo significa più libertà per i pro­fes­sio­ni­sti, ma allo stesso tempo una maggiore pos­si­bi­li­tà di com­met­te­re errori.

Anche per Gulp esistono molti task già pronti sotto forma di plug-in. La directory ufficiale su gulpjs.com contiene più di tremila esten­sio­ni come gulp-jekyll (com­pi­la­zio­ne di progetti Jekyll), gulp-php-minify (ot­ti­miz­za­zio­ne del codice PHP) o gulp-css­my­i­cons (con­ver­sio­ne in CSS di icone SVG).

A prima vista Gulp e Grunt non sembrano molto diversi l’uno dall’altro. Entrambe le ap­pli­ca­zio­ni sono di­stri­bui­te con Licenza MIT, ragione per cui il codice sorgente è open source; entrambe sono con­trol­la­bi­li at­tra­ver­so una riga di comando e di­spon­go­no a questo scopo di una propria in­ter­fac­cia già in­stal­la­ta; inoltre entrambi i task runner uti­liz­za­no npm come gestore di pacchetti. Grazie all’ampia directory di plug-in, sia Gulp che Grunt sono fa­cil­men­te in grado di au­to­ma­tiz­za­re un gran numero di ope­ra­zio­ni. Nel caso non sia di­spo­ni­bi­le l’esten­sio­ne per un de­ter­mi­na­to task, con entrambi i tool è possibile pro­gram­mar­la: per questo motivo, il loro utilizzo pre­sup­po­ne la co­no­scen­za di Ja­va­Script e Node.js.

Tuttavia, se Gulp utilizza so­prat­tut­to il modulo stream di Node.js, Grunt al contrario utilizza prin­ci­pal­men­te il modulo fs (file system), ed è proprio sotto questo aspetto che i due programmi si dif­fe­ren­zia­no in maniera si­gni­fi­ca­ti­va: Grunt è de­ci­sa­men­te orientato ai file e crea file locali e tem­po­ra­nei mentre esegue le ope­ra­zio­ni, mentre Gulp gestisce i processi tramite la RAM e li scrive im­me­dia­ta­men­te sul file di de­sti­na­zio­ne, pre­sen­tan­do un vantaggio in termini di velocità nel compiere le ope­ra­zio­ni.

La seconda dif­fe­ren­za fon­da­men­ta­le risiede nelle diverse con­ce­zio­ni alla base dei due software. La pro­gram­ma­zio­ne di Grunt fornisce all’utente una direzione precisa, nella quale i task pronti sono già definiti e devono soltanto essere con­fi­gu­ra­ti. Gulp al contrario lascia molto più spazio alla pro­gram­ma­zio­ne per­so­na­liz­za­ta dell’utente, poiché mette a sua di­spo­si­zio­ne soltanto i moduli in­di­vi­dua­li. Questo aspetto facilita da un lato la com­pren­sio­ne del back­ground e delle con­nes­sio­ni, ma dall’altro richiede all’utente un impegno maggiore. Possiamo dire che Gulp dimostra tutte le sue qualità con l’aumentare delle di­men­sio­ni dei progetti, ragion per cui è ormai diventato la prima scelta per molti. Pre­sen­tan­do tuttavia meno dif­fi­col­tà di utilizzo, Grunt ha ancora buone ragioni per essere impiegato in progetti più piccoli e facili da gestire.