Grunt, ottimizzare il codice di un sito web in automatico

Grunt logo

Grunt consente di automatizzare una serie di operazioni ripetitive che uno sviluppatore è spesso costretto a fare, come:

  1. Minificazione;
  2. Compilazione;
  3. Unit testing;
  4. Linting.

Per poter utilizzare Grunt è necessario installare Ruby, dopodiché è possibile lanciare da linea di comando:

    npm install -g grunt-cli

Grunt per svolgere una serie di compiti in automatico ha bisogno di 2 file:

  1. package.json: utilizzato da npm per memorizzare dei metadata per il funzionamento di Grunt (ad esempio i plugin utilizzati);
  2. Gruntfile.js: utilizzato per configurare o definire i task dei plugin da caricare.
  3. Un esempio del file package.json è il seguente:

    {
        "name": "my-project-name",
        "version": "0.1.0",
        "devDependencies": {
            "grunt": "~0.4.5",
            "grunt-contrib-jshint": "~0.10.0",
            "grunt-contrib-nodeunit": "~0.4.1",
            "grunt-contrib-uglify": "~0.5.0"
        }
    }

    Ecco invece un esempio di Gruntfile.js:

    module.exports = function(grunt) {

        // Configurazione del progetto
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            uglify: {
            options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                },
                build: {
                    src: 'src/<%= pkg.name %>.js',
                    dest: 'build/<%= pkg.name %>.min.js'
                }
            }
        });

        // Caricamento dei plugin
        grunt.loadNpmTasks('grunt-contrib-uglify');

        // Task di default
        grunt.registerTask('default', ['uglify']);

    };


    In questo file dovremo definire i plugin che abbiamo intenzione di utilizzare, ad esempio per la compilazione dei file Sass, e definirne il comportamento per ogni eventuale modifica ai file.

    Attualmente Grunt viene utilizzato da grandi multinazionali come Microsoft, Adobe, Twitter, Bootstrap, FireFox, Opera e WordPress. Per approfondire il discorso su Grunt vi rimando al sito ufficiale.

Pubblicato in Front-end, JavaScript Taggato con: , , , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*