Analizziamo il codice del file di esempio:

Questa è la wrapper function che racchiude tutto il codice di definizione dei tasks:

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

all’interno della wrapper function abbiamo tre sezioni: la sezione di configurazione dei task, i comandi di caricamento dei plugin e il comando di definizione del task di default, cioè quello che viene eseguito quando grunt è lanciato senza specificare opzioni.

Nella sezione di configurazione del progetto di questo esempio, che viene dichiarata passando un oggetto alla funzione grunt.initConfig(), abbiamo quattro distinti comandi:

//  Project configuration.
    grunt.initConfig(
      {

        pkg: grunt.file.readJSON('package.json'),
        concat: {
          options: {
            separator: ';'
          },
          dist: {
            src: ['src/app.js', 'src/app1.js'],
            dest: 'build/output.js'
          }
        },
        uglify: {
            build: {
                  src: 'build/output.js',
                  dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        jshint: {
            all: ['Gruntfile.js', 'src/*.js']
        }
    });

il primo comando pkg: grunt.file.readJSON(‘package.json’) carica nella variabile pkg il contenuto del file di configurazione package.json. In questo file, che deve esistere nella directory del progetto, sono definiti svariati parametri, in questo caso il parametro di interesse è il nome dell’applicazione che verrà utilizzato di seguito.

Seguono altri tre comandi che definiscono i rispettivi task che formano questo gruntfile: in questo esempio definiamo il task concat, che serve appunto a concatenare i vari files javascript che compongono l’applicazione, poi c’è il task uglify, che rimuove commenti e spazi dal codice per produrne una versione compatta, infine il task jshint che effettua la validazione del codice javascript.

La dichiarazione di questi tre task avviene con tre coppie chiave valore, in cui la chiave è il nome assegnato al task e il valore sono i parametri che lo specificano. In questo esempio utilizziamo dei task che vengono specificati nei plugin grunt-contrib-uglify, grunt-contrib-concat, grunt-contrib-jshint, da cui i nomi utilizzati.

Il task concat viene dichiarato con due parametri: options e dist.

Con il parametro options in questo esempio si specifica il separatore utilizzato durante il processo di concatenazione dei files

options: { separator: ';' }

Con il parametro dist vengono specificati i files da concatenare e il file da produrre

dist: {   src: ['src/app.js', 'src/app1.js'],
          dest: 'build/output.js'
      }

Il task uglify viene dichiarato con un unico parametro: build
In questo parametro viene specificato il file da comprimere e il file compresso

uglify: {
            build: {
                  src: 'build/output.js',
                  dest: 'build/<%= pkg.name %>.min.js'
            }
        }

Infine per il task jshint con l’unico parametro all viene dichiarato l’elenco dei files
da verificare

jshint: {
            all: ['Gruntfile.js', 'src/*.js']
        }

La sezione con i comandi di caricamento dei plugin specifica l’elenco di quelli utilizzati in questo Gruntfile:

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');

Infine nell’ultima sezione dichiariamo i task da eseguire quando grun viene lanciato senza parametri:

 
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

Per provare questo esempio dobbiamo ovviamente avere installato grunt.

Il prerequisito è che Node.js ( versione 0.8.0 o successive ) sia installato sulla vostra macchina.

Poi con questo comando installiamo la grunt command line:

npm install -g grunt-cli

Il comando deve essere eseguito con i permessi di amministratore sotto Windows oppure attraverso sudo sotto Linux o OS X.

Installare la command line di grunt non significa avere installato il task runner, questo viene installato localmente (nella directory del vostro progetto) con il comando npm install dopo avere creato i files package.json (nel quale vengono dichiarate le dipendenze, cioè cosa verrà installato da npm install) e ovviamente il file Gruntfile.js, di cui abbiamo visto un esempio.

Come si crea il file package.json? si può utilizzare il comando npm init oppure può essere scritto direttamente.  Questo è il file package.json utilizzato per il nostro esempio.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

… segue nella prossima puntata …..

E’ stata rilasciata la versione 0.10.25 di nodejs

Rilasciate le versioni 1.11 e 2.1 di jQuery