DiscoveryNG e Grunt

La cassetta degli attrezzi di uno sviluppatore front-end è sempre più ricca di strumenti pensati per facilitare le cose noiose.
Il problema è che spesso mi ritrovo a pensare:"fico asdf.io! Ma in pratica che me ne faccio?!"
Questo soprattutto perchè non sviluppo troppi siti o applicazioni, quindi capite bene che per me, usare finalmente uno di quegli strumenti è sempre un mix di shame on me e hell yeah! che fa tremare le mani.

Tornando a sviluppare con costanza DiscoveryNG per l’aggiornamento a Bootstrap 3, avevo proprio bisogno di automatizzare un task noioso e frequente: compilare i file .less.
Per questo motivo avevo installato Recess, con cui tenevo sotto controllo il mio file grazie al comando recess less/liquens.less:liquens.css --watch less/

Fin qui tutto bene: modifico il file .less, viene compilato il .css, ricarico la pagina del browser, et voilà!
Però… che noia… come mai non posso usare i meravigliosi strumenti di sviluppo di Chrome? Risposta: perchè Recess non usa una versione aggiornata di less in grado di supportare le Source Maps 🙁

Così tutti passano a grunt-contrib-less e la sera escono con gli amici.

Grunt.js

Questo simpaticissimo progetto si preoccupa di fare solo una cosa: automatizzare task. E siccome si basa su Node.js possiamo parlare tranquillamente javascript.

Per cominciare

La guida iniziale vi porterà via pochissimo tempo, soprattutto se terrete a mente: "se ce l’ha fatta lui, ci posso riuscire anch’io".

I due file magici sono: package.json che si preoccuperà di descrivere il progetto ed elencare i moduli di node da usare, Gruntfile.js che inizializzerà Grunt permetendovi di caricare e configurare i vari moduli (gruntplugin).

Siccome si tratta di strumenti per lo sviluppatore, la cartella node_modules è stata aggiunta al .gitignore, quindi dovrete lanciare npm install per scaricare tutti i gruntplugins.

I task a disposizione

Pensando alle cose noiose che facciamo quando sviluppiamo DiscoveryNG, sono stati creati questi task:

• grunt watch ad ogni cambiamento della cartella liquens/css/less ricompila il file liquens.css
• grunt requirejs compila i javascript usando r.js per requirejs
• grunt less:prod compila e comprime i file .less di liquens
• grunt less:themes compila e comprime tutti i temi presenti in DiscoveryNG
• grunt flush cancella tutta la silverstripe-cache dai vari sites
• grunt è una scorciatoia per lanciare di seguito i task: requirejs, prod, themes

Lavorare con i ChromeDevTools

Una volta scoperto come attivare la sezione Experiments, potrete finalmente lavorare comodamente coi pre-processori css. Personalmente ho seguito la guida che trovate qui (da metà in poi, la parte che riguarda come creare un Workspace e mappare i file .less).