Minimizzare file js con Grunt

In questo articolo vedremo come minimizzare uno o più file js con Grunt in un unico file min.js.

La prima operazione da fare è installare grunt-cli, è consigliabile installarlo a livello globale lanciando il seguente comando da CLI

$ npm install -g grunt-cli

Se vogliamo integrare Grunt in un progetto già esistente allora dobbiamo installare i seguenti pacchetti grunt, grunt-contrib-uglify e grunt-contrib-watch da CLI, possiamo farlo tramite il seguente comando

$ npm i grunt grunt-contrib-uglify grunt-contrib-watch

se invece vogliamo integrare Grunt in un progetto nuovo, allora dobbiamo prima inizializzare il progetto stesso tramite il comando npm init

$ npm init

e successivamente installare i pacchetti come abbiamo visto prima

$ npm i grunt grunt-contrib-uglify grunt-contrib-watch

Adesso che abbiamo un progetto npm inizializzato e con i pacchetti grunt che ci servono, creiamo nella root un file Gruntfile.js così composto

Gruntfile.js

module.exports = function (grunt) {
   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'
         }
      },
      watch: {
         uglify: {
            files: ['src/<%= pkg.name %>*.js'],
            tasks: ['uglify']
         }
      }
   });
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.registerTask('default', 'watch');
};

pkg.name è il nome del pacchetto, che possiamo vedere nel file package.json

package.json

{
  "name": "grunt_example",
   .............
   .............
}

in questo esempio è grunt_example, quindi in questo caso dal file js src/grunt_example.js verrà generato un file js minimizzato in build/grunt_example.min.js, possiamo anche non usare questo sistema e usare i nomi che vogliamo sostituendo <%= pkg.name %> col nome desiderato del file js, dunque immaginiamo di avere una struttura come questa

• node_modules/
• src/
  • grunt_example.js
• build/
• Gruntfile.js
• package-lock.json
• package.json

ora da CLI lanciamo il comando grunt, vedremo un messaggio come questo

$ grunt
Running "watch" task
Waiting...

come appena inizieremo a scrivere del codice nel file src/grunt_example.js verrà generato e aggiornato in tempo reale un file build/grunt_example.min.js.

In questo esempio abbiamo minimizzato un solo file js, se vogliamo minimizzare più file js in un unico file min.js allora basta modificare il file Gruntfile.js, precisamente il valore build.src come segue

Gruntfile.js

module.exports = function (grunt) {
   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
   ..............
   ..............
         build: {
            src: 'src/<%= pkg.name %>*.js',
            dest: 'build/<%= pkg.name %>.min.js'
         }
      },
   ..............
   ..............
   });
   ..............
   ..............
};

cioè basta aggiungere un asterisco (*) al nome del file js src/<%= pkg.name %>*.js, in questo modo tutti i file js che per esempio hanno il nome

• src/grunt_example1.js
• src/grunt_example2.js
• src/grunt_example3.js

verranno minimizzati in un unico file build/grunt_example.min.js.