Como automatizar la minificación de archivos CSS y JS con Grunt

En la entrada de blog Introducción a Grunt explique como podíamos utilizar grunt para automatizar tareas y al final se hizo un ejemplo para combinar todos los archivos JS de nuestro proyecto, que obviamente también se puede aplicar a CSS.

El problema que al concatenar es cierto que se reduce el numero de solicitudes al servidor, pero se genera un archivo bastante grande, por lo que lo mas optimo es comprimir estos archivos lo mas posible debido a que no serán leídos por un humano, sino interpretados por el navegador a este proceso se le llama minify o minificación.

1. Instalar grunt plugin.

Lo primero que debemos hacer es instalar el plugin que vamos a usar para minificación con grunt, para que sea a de una forma automática. En este caso utilizare el plugin uglify para instalarlo ejecutamos el siguiente comando suponiendo que ya tenemos npm instalado.

$ npm install grunt-contrib-uglify --save-dev

El anterior comando agregara las respectivas dependencias es nuestro archivo package.json con una entrada similar a la siguiente.

"grunt-contrib-uglify": "~0.2.0",

2. Agregar tarea a grunt.

Teniendo como base el archivo Gruntfile.js de la entrada anterior agregamos la configuración necesaria para automatizar la tarea de minificación y registrar la tarea, como se muestra a continuación.

'use strict';
 
module.exports = function (grunt) {
 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            dist: {
                src: [
                    'js/libs/*.js', // All JS in the libs folder
                    '/js/global.js'  // This specific file
                ],
                dest: '/js/build/production.js',
            }
        },
        uglify: {
            build: {
                src: yeomanConfig.app + '/js/build/production.js',
                dest: yeomanConfig.app + '/js/build/production.min.js'
            }
        }, 
    });
 
    // Where we tell Grunt we plan to use some plug-ins.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
 
    // Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'uglify']);
};

Como se puede apreciar tomamos como insumo el archivo producido por la tarea de contact que es el archivo /js/build/production.js y este se minificara en el archivo /js/build/production.min.js, ademas cargamos el plugin y registramos la tarea.

3. Ejecutar la tarea.

Ahora para ejecutar la tarea tenemos solo debemos ejecutar el comando:

$ grunt uglify

El comando anterior ejecutar la tarea especifica y tomara el estado actual del archivo concatenado y lo minificara, pero si existen cambios en nuestros archivos de JS no se tomaran en cuenta porque el proceso de concatenación no se lleva acabo al ejecutar la tarea uglify de forma especifica.

Podemos ejecutar todas las tareas disponibles con el siguiente comando.

$ grunt

Este comando ejecuta toda las tareas disponibles, logrando que nuestra version minificada tenga los últimos cambios en nuestros archivos de desarrollo.

Espero que haya sido de su agrado.