Grunt.js for dummies: come funziona e perché è utile
Questo articolo è dedicato a chi, come me, approcciandosi a Grunt.js vedeva soltanto un muro insormontabile. Dopo un po’ di studio e sperimentazioni, però, sono riuscito a capire meglio come utilizzare questo task runner nel migliore dei modi e ho scoperto che non è per niente difficile!
Ma andiamo con ordine: dopo essermi letto la maggior parte della documentazione presente sul sito ufficiale e aver utilizzato Grunt.js per eseguire dei task con sass, ho deciso di scrivere questa guida che si concentrerà su come svolgere due dei task più importanti e indispensabili con Grunt:
- Grunt Sass (che pre-processa i file scss generando i file css);
- Grunt Watch (che crea un task per monitorare senza pausa i file scss, generando automaticamente i file css)
Che cos’è e a cosa serve Grunt.js?
Grunt.js è un cosiddetto task runner e serve ad eseguire dei compiti che gli vengono assegnati in modo automatizzato, installando plugin che possono differenziarsi da progetto a progetto, a seconda di quello che ci serve. Ad esempio, potremmo aver bisogno del plugin Autoprefixer se abbiamo bisogno di inserirli per vecchi browser, oppure se abbiamo bisogno di minimizzare i file css una volta compilati, c'è il plugin Cssmin.
Per funzionare, però, Grunt ha bisogno che ci sia installato node.js (che può essere scaricato dal sito ufficiale, sia per windows che per mac, e installato come un normale software).
Dopo aver installato node.js, si può partire con l’installazione di Grunt. Ma come si installa?
Prima di tutto si avvia il terminale e si raggiunge la cartella del progetto di tuo interesse. Dopodiché, si digita:
npm install -g grunt-cli
e Grunt dovrebbe essere installato. Per controllare che tutto sia andato per il verso giusto, dovrebbe essere comparsa la cartella node_modules, che prima non c’era.
Cosa fare dopo aver installato Grunt?
Ora, oltre alla cartella node_modules, per far funzionare correttamente Grunt bisogna creare altri due file e inserirli nella root del progetto:
- package.json
- Gruntfile.js
Il file package.son contiene le informazioni essenziali che servono a Grunt per funzionare, come nell’esempio sottostante:
"name": "testgrunt", "description": “test grunt", "author": "wellnet", "version": "0.1.0", "devDependencies": { "grunt": "^1.0.1", } }
In questo file scriveranno automaticamente i plugins che verranno installati e verranno salvati le versioni degli stessi.
L’altro file da creare è Gruntfile.js. In questo, si comanderà Grunt inserendo tutte le istruzioni e le opzioni dei plugin. Si può incominciare inserendo queste due righe:
module.exports = function(grunt) { grunt.initConfig({ }); };
Come utilizzare i plugin in Grunt
Grunt, essendo solo un contenitore, ha bisogno dei plugin per funzionare correttamente. In questo articolo vediamo come utilizzarne due:
Di norma, sempre se non viene specificato diversamente all’interno della documentazione del plugin, per installare un plugin è necessario andare nella cartella del progetto tramite terminale e inserire, ad esempio:
npm install grunt-contrib-sass —save-dev
A questo punto il plugin è installato. Per verificarlo, come sempre, controllare la cartella node_modules oppure il file package.json, che nel frattempo si sarà aggiornato.
Tutto ciò che resta da fare è andare nel Gruntfile.js e impostarlo come è indicato nella documentazione. Per il plugin appena installato, ad esempio, aggiungiamo:
module.exports = function(grunt) { grunt.initConfig({ sass: { dist: { options: { style: 'expanded' }, files: { './css/style.css': './sass/style.scss', } } }, }); grunt.loadNpmTasks('grunt-contrib-sass'); };
Queste righe di testo, in poche parole, danno a Grunt un’istruzione precisa: quando viene scritto sul terminale il task grunt sass, lui dovrà prendere il file sass, processarlo e farlo diventare un file css e inserirlo nella cartella che è stata inserita come impostazione. Una volta salvato il file, il primo task è terminato.
Per vederlo in funzione è necessario scrivere nel terminale, all’interno della cartella del progetto, "grunt sass” (dove sass è una label modificabile a piacimento, io per abitudine metto come nome task il nome del plugin) e vedere se il file sass che è stato creato viene processato e se viene creato il file css nella cartella che è stata indicata, in maniera automatica.
Semplice, no?
Il secondo plugin di cui abbiamo parlato, Watch, permette di scrivere il codice senza preoccuparsi del terminale, poiché genera automaticamente il file css.
Come suggerisce il nome, Watch “guarda” il scss in attesa di modifiche e, nel momento in cui le trova, aggancia il task creato in precedenza (sass) e lo lancia automaticamente.
Possiamo inserire questo task molto facilmente, come nell’esempio sotto:
watch: { sass: { files: ['sass/*.scss'], tasks: ['sass'], } }
Se prendiamo il file grunt.js nella sua totalità, avremo un file così generato:
module.exports = function(grunt) { grunt.initConfig({ sass: { dist: { options: { style: 'expanded' }, files: { './css/style.css': './sass/style.scss', } } }, watch: { sass: { files: ['sass/*.scss'], tasks: ['sass'], } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); };
Come si può notare, come primo task è stato inserito Sass, un plugin che genera il file scss, e come secondo task è stato inserito il plugin Watch così che, quanto opportunamente richiamato, questo gestisca da solo tutta la procedura di process dei file scss.
In questo modo, da barriera insormontabile, Grunt è diventato uno strumento molto utile per velocizzare il lavoro.
Nel caso in cui si voglia comunque processare il Sass come fa Grunt ma utilizzando altre applicazioni, abbiamo già visto in passato un modo per farlo utilizzando Compass.
