11.Minifizzazione

Il nostro primo pacchetto utilizzando grunt.

Passo 1. Creare il file package.json

Il primo passaggio di questa esercitazione è quello di creare il file package.json. basta lanciare il comando npm init per crearne una versione base.

Lanciando questo comando da command line il prompt farà una serie di domande, alla fine della quale il file sarà generato.

Passo 2. Installare i componenenti necessari

In questo passaggio installeremo i seguenti pacchetti per minifizzare tutti gli elementi che ci interessano.

npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev
npm install nodejs-websocket --save-dev
npm install requirejs --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-jshint --save-dev

Passo 3. A questo punto possiamo procedere, creando il nostro Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      common: {
        src: ['js/loadLibrary.js', 'js/plugins.js', 'js/common.js'],
        dest: 'js/build/common.min.js'
      },
      contact: {
        src: ['js/model/ContactModel.js', 'js/view/ContactView.js', 'js/controller/ContactController.js'],
        dest: 'js/build/contact.min.js'
      },
      company: {
        src: ['js/view/CompanyView.js', 'js/controller/CompanyController.js'],
        dest: 'js/build/company.min.js'
      },
      helpdesk: {
        src: ['js/model/HelpDeskModel.js', 'js/view/HelpDeskView.js', 'js/controller/HelpDeskController.js'],
        dest: 'js/build/helpdesk.min.js'
      }
    },
    jshint: {
      all: [
        'Gruntfile.js',
        'js/main.js',
        'js/common.js',
        'js/loadLibrary.js',
        'js/plugins.js'
      ],
      test: {
        options: {
          jshintrc: '.jshintrc'
        },
        src: ['test/spec/{,*/}*.js']
      }
    },
    cssmin: {
      combine: {
        files: {
          'css/output.css': ['css/normalize.css', 'css/main.css', 'css/style.css']
        }
      }
    },
    imagemin: {                          // Task
      dynamic: {                         // Another target
        files: [{
          expand: true,                  // Enable dynamic expansion
          cwd: 'img/',                   // Src matches are relative to this path
          src: ['**/*.{png,jpg,gif}'],   // Actual patterns to match
          dest: 'img/build'              // Destination path prefix
        }]
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  
  // Default task(s).
  grunt.registerTask('default', ['jshint','uglify','cssmin','imagemin']);

};

Passo 4. Lanciare il nosto task runner

Basta questo comando dalla rootpath del nostro progetto per avviare i processi di controllo e minifizzazione.

# grunt -v

Per ignorare gli errori evidenziati all'interno del nostro codice javascript possiamo aggiungere al comando precedente il parametro --force

# grunt -v --force