Comprimir CSS, HTML y JS con Grunt.js

Grunt.js Wallpaper por J. Albert Bowden II. CC BY. Imagen con calidad y tamaño reducidos.

En este tutorial explicaremos cómo comprimir archivos CSS, HTML y JS usando algunos plugins para Grunt.js. Comprimir CSS, HTML y JS es algo muy necesario en el desarrollo de sitios web hoy en día.

Grunt.js es una utilidad de Node.js que permite automatizar la ejecución de tareas administrativas en un proyecto de software. Es muy similar en su funcionamiento a Ant, su contraparte en Java.

Con Grunt.js es posible automatizar tareas cómo generar CSS a partir de LESS/SCSS o comprimir archivos CSS, HTML y JS usando gzip.

Al tener que descargar menos bytes, un navegador web podrá mostrar una página web en menos tiempo, mejorando la experiencia del usuario en nuestro sitio y como consecuencia nuestro posicionamiento en los buscadores como Google o Bing.

Los archivos package.json y Gruntfile.js

Para poder usar Grunt.js necesitaremos crear dos archivos en el directorio raíz de nuestro proyecto: packages.json y Gruntfile.js. El archivo packages.json lo usa Node.js para verificar las dependencias de nuestro proyecto y así poder instalar los paquetes que hagan falta. Este archivo es muy similar al archivo setup.py en el ambiente Python.

{
  "name": "nombre_proyecto",
  "version": "0.0.0",
  "description": "Descripción del proyecto",
  "main": "index.js",
  "author": "Nombre Del Autor"
}

El archivo Gruntfile.js lo usa Grunt.js para saber que tareas se deben ejecutar y en que orden. Para cada tarea se especifican los archivos que se desean comprimir y la ubicación de destino, además del nombre, para los archivos ya comprimidos. Más adelante se dará una explicación detallada sobre cómo escribir las tareas.

Al crear los archivos, el directorio del proyecto debe verse así:

mi_proyecto/
  Gruntfile.js
  package.json

Instalación de Grunt.js

Para poder instalar Grunt.js, debemos tener instalado Node.js en nuestra computadora.

Enseguida debemos instalar Grunt.js de forma global en nuestra computadora. Para esto abrimos una terminal y ejecutamos el siguiente comando:

>> Aplica para cualquier sistema UNIX (Linux, BSD, OS X) con Node.js
>> instalado
$ sudo npm install -g grunt-cli

Instalación del plugin para Grunt.js

Para este tutorial necesitamos instalar el plugin grunt-contrib-compress:

>> Aplica para cualquier sistema UNIX (Linux, BSD, OS X) con Node.js
>> instalado
$ npm install grunt-contrib-compress --save-dev

La opción --save-dev permite guardar automáticamente el nombre y la versión del plugin que estamos instalando en el archivo packages.json, dentro de la sección devDependencies.

De esta forma, si tenemos que reinstalar el proyecto desde cero o deseamos instalar nuestro proyecto en otra computadora, solo tenemos que ejecutar npm install dentro del directorio raíz para instalar todas las dependencias.

En el archivo package.json debe verse algo así como esto:

{
  "devDependencies": {
    "grunt-contrib-compress": "^0.13.0"
  }
}

Configuración de la tarea para comprimir CSS, HTML y JS

En el archivo Gruntfile.js debemos agregar la configuración de las tareas que queremos que Grunt.js ejecute automáticamente. Todo archivo Gruntfile.js debe tener las siguientes líneas de código:

module.exports = function (grunt) {
  // El codigo de configuracion de las tareas va aqui.
}

Para configurar la tarea que va a comprimir CSS, HTML y JS, agregamos las siguientes líneas:

grunt.initConfig({
  pkg: grunt.file.readJSON("package.json"),

  compress: {
    options: {
      mode: 'gzip'
    },
    css: {
      files: [
        {
          expand: true,
          cwd: "./directorio_origen/",
          src: ["**/*.css"],
          dest: "./directorio_destino/"
        }
      ]
    },
    html: {
      files: [
        {
          expand: true,
          cwd: "./directorio_origen/",
          src: ["**/*.html"],
          dest: "./directorio_destino/"
        }
      ]
    },
    js: {
      files: [
        {
          expand: true,
          cwd: "./directorio_origen/",
          src: ["**/*.js"],
          dest: "./directorio_destino/"
        }
      ]
    }
  }
});

La tarea compress que acabamos de definir se puede descomponer en las siguientes partes:

• Opciones de configuración: En la sección options se definen las configuraciones para la tarea. En este caso la tarea compress permite configurar el método que se usará para realizar la compresión. Esta configuración aplica para todos los targets que definamos en la tarea.
• Targets: Las secciones css, html y js se denominan targets y permiten definir diferentes escenarios para la ejecución de la tarea. Cada target tiene sus propias variables:
  • expand: Esta variable permite definir la ruta a los archivos de origen, es decir los archivos que deseamos comprimir, de forma dinámica.
  • cwd: Representa el directorio en donde se encuentran los archivos que queremos comprimir. En este caso, la ruta del directorio es relativa a la ubicación del archivo Gruntfile.js pero también se pueden usar rutas absolutas.
  • src: Éste es un listado de patrones glob que nos permiten obtener los archivos queremos comprimir. Por ejemplo, el patrón **/*.css significa que Grunt.js va a buscar todos los archivos con extensión .css dentro del directorio que definimos anteriormente y todos sus subdirectorios.
  • dest: Es el directorio en dónde se van a almacenar los archivos comprimidos.

Ejecución de la tarea para comprimir HTML, CSS y JS

Lo único que nos hace falta es cargar el plugin de compresión que instalamos con anterioridad y registrar la tarea para que puedan ser usada desde la terminal. Luego de eso será posible comprimir CSS, HTML y JS con el comando grunt.

Grunt.js necesita saber cuáles plugins, de los que hemos instalado en nuestra computadora, queremos usar para ejecutar las tareas que ya definimos. Para esto agregamos la siguiente línea al archivo Gruntfile.js:

grunt.loadNpmTasks("grunt-contrib-compress");

A continuación, registramos la tarea default para que con solo ejecutar el comando grunt nuestros archivos se compriman automáticamente:

grunt.registerTask("default", ["compress"]);

¡Et voilá! Para comprimir nuestros archivos CSS, HTML y JS, abrimos una terminal y ejecutamos el comando grunt:

$ grunt

Para finalizar queda a su disposición el código fuente completo del archivo Gruntfile.js:

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),

    compress: {
      options: {
        mode: 'gzip'
      },
      css: {
        files: [
          {
            expand: true,
            cwd: "./directorio_origen/",
            src: ["**/*.css"],
            dest: "./directorio_destino/"
          }
        ]
      },
      html: {
        files: [
          {
            expand: true,
            cwd: "./directorio_origen/",
            src: ["**/*.html"],
            dest: "./directorio_destino/"
          }
        ]
      },
      js: {
        files: [
          {
            expand: true,
            cwd: "./directorio_origen/",
            src: ["**/*.js"],
            dest: "./directorio_destino/"
          }
        ]
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-compress");

  grunt.registerTask("default", ["compress"]);
};