SASS e Grunt

Nella recente branca della FrontEnd automation si sente spesso parlare di Grunt, un tool che consente di automatizzare parte dei task ripetitivi che da tempo fanno parte della routine di uno sviluppatore client side:

• minificazione del codice;
• generazione di sprite;
• concatenazione di file JavaScript;
• e molto altro...

Tra queste operazioni figura anche la compilazione del CSS da SASS e, fortunatamente, possiamo automatizzare e rendere questa attività reattiva alle modifiche dello sviluppatore integrandola, appunto, in Grunt.

Vediamo come fare; per prima cosa provvediamo all'installazione di NodeJS seguendo le istruzioni presenti sul sito web, contestualmente all'installazione di NodeJS verrà caricato sul nostro computer anche npm, il package manager di NodeJS, che potremo poi utilizzare per l'installazione di Grunt lanciando dalla linea di comando:

npm install –g grunt-cli

Per poter utilizzare Grunt dobbiamo ora creare un file, per convenzione chiamato package.json, che descriva le dipendenze NodeJS necessarie al progetto, eseguiamo quindi:

npm init

...e rispondiamo a tutte le domande che ci vengono poste. Per le finalità dell'esercizio possiamo pure procedere senza inserire nessuna informazione ma premendo soltanto il tasto di invio un certo numero di volte, per progetti reali è invece importante compilare questo documento nel modo più accurato possibile. Una volta completato questo step possiamo installare le dipendenze di cui Grunt necessita per poter compilare automaticamente il nostro SASS in risposta ad ogni modifica sul file, eseguiamo quindi:

npm install grunt grunt-contrib-sass grunt-contrib-watch --save-dev

Ora dobbiamo sviluppare il nostro Gruntfile.js in modo che sappia descrivere correttamente il comportamento richiesto, nel dettaglio andremo a definire il task di compilazione del SASS e a specificare come questo task debba essere chiamato in risposta alla modifica di un qualsiasi file con estensione scss, per semplicità supporremo di essere all'interno della stessa cartella del progetto precedente e di poter quindi disporre di app.scss e della libreria imagesize.rb che abbiamo sviluppato poco fa:

module.exports = function(grunt) {
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.initConfig({
		sass: {
			dev: {
				files: {
					'app.css': 'app.scss'
				},
				options: {
					require: './imagesize.rb'
				}
			}
		},
		watch: {
			sass: {
				files: ['*.scss'],
				tasks: ['sass']
			}
		}
	});
	grunt.registerTask('default','watch');
};

Il file che abbiamo appena sviluppato può essere diviso sommariamente in tre sezioni, nella prima importiamo i moduli che ci aiuteranno ad ottenere l'automatismo richiesto (Grunt possiede centinaia, se non migliaia, di questi moduli) in questo specifico setup ne utilizziamo due:

• grunt-contrib-sass: consente di orchestrare la compilazione di file SASS nei corrispettivi CSS;
• grunt-contrib-watch: consente di descrivere un set di task che vogliamo siano invocati contestualmente alla modifica di tutti i file che rispondono al pattern specificato, nel nostro caso tutti quelli con estensione scss.

La seconda sezione tratta proprio della implementazione pratica dei due moduli in questione, ogni modulo risponde ad uno specifico nome, rispettivamente sass e watch e a diverse e specifiche chiavi di configurazione descritte nella documentazione dei due moduli.

L'intrinseca differenza di ogni modulo rende purtroppo impossibile definire delle linee guida generali ma solitamente non si incontrano mai troppe difficoltà nell'impostazione di un nuovo modulo e la documentazione è spesso molto ben dettagliata.

In ultimo nella terza sezione ci limitiamo a definire come azione di default il task watch, possiamo quindi procedere invocando tale azione eseguendo da linea di comando:

grunt

Ora qualsiasi modifica ad ogni file con estensione scss scatenerà la compilazione del foglio SASS e la conseguente generazione del CSS corrispondente.

Quanto abbiamo visto finora non sembra troppo diverso da una semplice esecuzione da linea di comando di sass con il flag di watch (sass -w), come visto nelle prime lezioni. In realtà le potenzialità di questa configurazione sono immensamente più profonde poiché possiamo estendere ulteriormente questo Gruntfile.js andando ad installare tutti i moduli necessari all'automazione dei task richiesti dal nostro FrontEnd.

Link utili

Queste operazioni esulano dal perimetro di questa guida ma per chiunque fosse interessato consiglio un approfondimento del tema leggendo questo articolo oppure andando direttamente sul sito web di Grunt.

Per approfondire ancora la conoscenza di questo preprocessore CSS consiglio di seguire il sito The SASS Way.