Grunt: tool di build per progetti JavaScript e front-end …su Node.js

11 dicembre 2012

Per molti sviluppatori la fase di build di un’applicazione è parte integrante del processo di realizzazione di un software. Questo passaggio è estremamente utile per automatizzare operazioni ripetitive e per ottimizzare le performance di esecuzione del prodotto finale.

Fino a qualche tempo fa, nel campo del front-end la posizione degli sviluppatori è spesso stata: il sistema di build si lancia col pulsante “refresh” del browser, a dire che non servono tool di build in quanto è il browser stesso a comporre il software.

…in molti sentono l’esigenza di automatizzare operazioni concatenazione e minificazione dei file.

Con l’aumento delle dimensioni e della complessità delle applicazioni lato client, tuttavia, in molti hanno sentito la necessità di automatizzare operazioni come la concatenazione e la minificazione dei file.

I primi passi in questa direzione sono stati compiuti adottando tool ampiamente collaudati quali Ant, anche perché strumenti come Closure Compiler e YUI Compressor sono rilasciati come pacchetti Java.

>>Leggi il nostro articolo introduttivo su ANT

Il problema principale, in questo caso, è che la sintassi XML usata da Ant è estremamente prolissa e aggiungere funzionalità per chi non conosce Java può risultare un’operazione ostica. Lo stesso dicasi per altri strumenti come Rake e Make.

Build con Node.js

La soluzione al problema è arrivata con la notorietà e diffusione di Node.js, un progetto che porta il linguaggio JavaScript sul server, rendendolo anche disponibile da riga di comando.

>>Leggi la nostra guida a Node.js

Il vantaggio principale di Node.js è che è facile da installare su tutte le principali piattaforme, ha un repository di pacchetti integrato e semplice da usare, ed il linguaggio con cui scrivere gli script è familiare a tutti gli sviluppatori front-end.

Altro fattore determinante per il successo di Node come strumento di build è la disponibilità nei repository di tutte le librerie necessarie, come UglifyJS (per la minificazione del sorgente) e JSHint (per la validazione del codice).

Task-based build con Grunt

Da questi presupporti, è partito lo sviluppo di Grunt uno strumento di build task based, cioè basato su operazioni concatenabili (alla maniera di Ant).

Al momento i task supportati nativamente sono:

TaskDescrizione
initCrea i file e le cartelle di base per un progetto basandosi su una serie di template
concatconcatena una serie di file
lintvalida i file con JSHint.
minminifica file JavaScript con UglifyJS.
qunitunit testing con QUnit.
serverlancia un server web statico.
testunit testing con nodeunit.
watchlancia specifici task quando dei file vengono modificati.

Oltre a questi, l’architettura di Grunt permette di realizzare dei task aggiuntivi sotto forma di plugin, oppure di installare quelli realizzati da altri sviluppatori della community.

La maggior parte di questi task possono contenere dei sotto-task (detti target) per suddividere le operazioni da compiere oppure per diversificare il risultato finale fra ambiente di sviluppo e produzione.

Passiamo ora agli aspetti pratici dell’utilizzo di Grunt.

Installazione

L’unico requisito per l’installazione di Grunt è possedere una versione recente di Nodejs (almeno 0.8.9) ed il package manager npm (di solito compreso nei pacchetti di installazione).

Per utilizzare il task qunit sarà invece necessario installare PhantomJS, un browser WebKit headless, cioè eseguibile da riga di comando senza interfaccia grafica.

Una volta soddisfatte le dipendenze, per installare Grunt basta digitare in un terminale:

npm install grunt -g

Il flag -g permette di installare il pacchetto globalmente, rendendolo disponibile per tutti i progetti come script da riga di comando.

Una volta finita l’installazione potete verificare che tutto sia andato a buon fine digitando il comando:

(.*)
grunt --help

Su Windows utilizzate invece:

grunt.cmd  --help

JavaScript Power Tools

Grunt fa parte di una serie di “Power tools” che permettono di affrontare lo sviluppo front-end di applicazioni single page, mobile o comunque di app moderne adottando un approccio più strutturato, quasi “enterprise”. Ne parla bene Marcello Teodori in questo video:

Se vuoi aggiornamenti su Grunt: tool di build per progetti JavaScript e front-end ...su Node.js inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Grunt: tool di build per progetti JavaScript e front-end ...su Node.js

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing