Scrivo questo articolo per le persone che come me che, approcciandosi a questo task runner, vedevano solo un muro insormontabile. Però avendo tempo a disposizione, e dovendo fare dei task con sass, ho voluto sperimentare Grunt e non è per niente difficile! Partiamo con ordine, mi sono letto la maggior parte della documentazione presente sul sito
( https://gruntjs.com) e con questo articolo vedremo come fare i due task più importanti e indispensabili:

Sass (preprocessa i file scss generando i file css) Watch (crea un task che monitora sempre i file scss generando automaticamente il file css)

Ma a cosa serve Grunt?

In poche parole, esegue dei compiti che gli assegnamo in modo automatizzato installando dei plugin che ci servono, che possono differenziarsi da progetto a progetto. Potremmo aver bisogno del plugin Autoprefixer se abbiamo bisogno di inserirli per i vecchi browser, o aver bisogno di minimizzare i file css una volta compilati.

Per funzionare Grunt però, ha bisogno che ci sia installato node.js (per installarlo basta scaricarlo dal sito ufficiale, https://nodejs.org/en/download/ sia per windows che per mac è un normale installer).

Dopo aver installato node,js, siamo pronti con il nostro primo progetto, ma come utilizzare e installare Grunt?

Da terminale, entrati nella cartella del progetto, digitare:

npm install -g grunt-cli

tutto qui! Per controllare che grunt sia stato installato correttamente, nella cartella del progetto, dovrebbe essere comparsa la cartella node_modules che prima non c’era.

ora, oltre alla cartella node_modules, per far funzionare correttamente grunt bisogna creare altri due file, package.json ed un altro chiamato Gruntfile.js e inserirli nella root del progetto.

Il file package.json contiene le informazioni essenziali che servono a Grunt per funzionare, come nell’esempio sottostante:

{
  "name": "testgrunt",
  "description": “test grunt",
  "author": "dasan",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^1.0.1",
  }
}

In questo file scriveranno automaticamente i plugins che installerai e vengono salvati i numeri di versioni degli stessi.

l’altro file da creare è Gruntfile.js.
in questo file andrai a comandare grunt, inserendo tutte le istruzioni, le opzioni dei plugin stessi.

possiamo incominciare a inserire queste due righe:

module.exports = function(grunt) {
  grunt.initConfig({
	  });
};

Plugin

Grunt per funzionare correttamente ha bisogno dei plugin, essendo solo un contenitore. in quest’articolo prendiamo e vediamo come utilizzare due plugin:

• Watch https://github.com/sindresorhus/grunt-sass
• scss https://github.com/gruntjs/grunt-contrib-watch

di norma, sempre se non specificato all’interno della documentazione del plugin, per installarlo, è necessario andare nella cartella del progetto tramite terminale, e digitare:

npm install grunt-contrib-sass —save-dev 

(nel caso del plugin sass) a questo punto il plugin è installato (puoi verificarlo sempre dalla cartella node_modules e da package.json che nel frattempo si è aggiornato).

Quel che resta da fare è andare nel Gruntfile.js ed 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');
};

in poche parole abbiamo detto a grunt che, se scriviamo sul terminale il task “grunt sass” lui prenderà il file sass, lo processerà facendolo diventare un file css, nelle cartelle che abbiamo inserito come impostazione. salvandolo il file, il nostro 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 vostro piacimento, io per abitudine metto come nome task il nome del plugin) e vedere che automaticamente, il file sass che gli abbiamo dato in pasto, viene processato e viene creato il file css nella cartella che abbiamo indicato.

molto semplice, non è vero?

il secondo plugin che voglio mostrarvi è Watch, un plugin che permette di scrivere il codice senza preoccuparsi del terminale, visto che genera automaticamente il file css.

Come dice il nome, il plugin watch “guarda” il file Scss in attesa di modifiche, e quando le trova, aggancia il task descritto 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 vedete, come primo task abbiamo inserito Sass, che genera il file scss, e come secondo task, abbiamo inserito il plugin Watch, così, se opportunamente richiamato, gestisce lui tutta la procedura di process dei file Scss.

e questo è tutto! dalla barriera insormontabile, è diventato uno strumento utile per velocizzare il nostro lavoro. e voi utilizzate Grunt? che plugin e task utilizzate?