Grunt

Introducción

Hace un par de días que gracias a estar leyendo en el Internet sobre formas de optimizar los sitios web, y sus tiempos de respuesta y carga he descubierto Grunt, pero bueno, ¿Qué es Grunt?.

Grunt es un controlador de tareas para JavaScript, es decir es un software que te permite ejecutar con un solo comando varias tareas a la vez que normalmente son repetitivas, algo así como un Shell Script para JavaScript.

Es bastante útil para ejecutar tareas que ejecutas de manera repetitiva, y que además puede que sean muchas tareas ejecutadas una tras otra todos los días, el poder automatizar estas tareas es muy importante al momento de buscar eficiencia.

Instalando Grunt

Vamos con algún ejemplo práctico para tener más clara su utilidad, primero vamos a instalar Grunt en nuestro sistema, lo primero es instalar nodejs y npm.

Instala Nodejs en Mac OS X

brew install nodejs

Instala Nodejs en Ubuntu

sudo apt-get install nodejs

Ahora que lo tenemos instalado vamos con el ejemplo.

Instala Grunt

Para instalar Grunt ahora que tenemos instalado Nodejs, solo ejecuta este comando.

npm install -g grunt-cli

Esto en realidad instala el cli de Grunt, lo que te permitirá correr los scripts

Grunt para minificar imágenes de tu sitio Web

El ejemplo que vamos a ver para entender como funciona, es útil para minificar las imágenes de un sitio Web, este sitio para ser exactos, como algunos de los lectores deben saber, este sitio es generado por Jekyll, es un puñado de archivos estáticos en un servidor Web que cambia todo el tiempo, en el momento de escribir esto esta alojado en Amazon S3 y Cloudfront, tiene unas cuantas imágenes que me gustaría minificar para ahorrar espacio, ancho de banda y hacer que les llege a los usarios de manera más eficiente y rápida, así que manos a la obra.

Grunt viene con una serie de aditivos (plugins) que permiten hacer todo tipo de cosas, vamos a usar ahora un plugin que nos va a ayudar a minificar las imágenes de este sitio.

Lo primero es crear un directorio para nuestro proyecto, y luego en él, crear un archivo package.json, puedes leer más de como hacerlo en el sitio oficial de Grunt. Mi archivo se ve así:

{
  "name": "www.garron.me",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-imagemin": "^0.9.3",
    "grunt-newer": "^1.1.0",
    "imagemin-pngquant": "^4.0.0",
    "coffee-script": "~1.6.3"
  },
  "dependencies": {
    "imagemin-gifsicle": "^4.1.0",
    "imagemin-jpegtran": "^4.1.0",
    "imagemin-mozjpeg": "^4.0.0",
    "imagemin-optipng": "^4.2.0"
  }
}

Luego con ese archivo, ejecutamos el siguiente comando:

npm install

Lo que hará es bajar de Internet e instalar los paquetes indicados en el archivo package.json, vamos luego a crear el script que va a ejecutar algunos de esos programas, para minificar las imágenes, el mío se ve así:

vim Gruntfile.js

Y colocamos este contenido en él.

module.exports = function(grunt) {

var mozjpeg = require('imagemin-mozjpeg');
var optipng = require('imagemin-optipng'); 

grunt.initConfig({
  imagemin: {
    png: {
      options: {
        // optimizationLevel: 7
    use: [optipng({optimizationLevel: 3})]
      },
      files: [
        {
          expand: true,
          cwd: '../www.garron.me/_site/',
          src: ['**/*.png'],
          dest: '/tmp/jekyll/',
          ext: '.png'
        }
      ]
    },
    jpg: {
      options: {
        progressive: true,
    optimizationLevel: 4,
    use: [mozjpeg()]
      },
      files: [
        {
          expand: true,
          cwd: '../www.garron.me/_site/',
          src: ['**/*.jpg'],
          dest: '/tmp/jekyll/',
          ext: '.jpg'
        }
      ]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', ['newer:imagemin']);
};

Lo que hace este archivo es definir las funciones, y estas optimizan los archivos .png y .jpg en el directorio www.garron.me/_site y copia su salída en el directorio /tmp/jekyll, luego solo tengo que copiar todas las imágenes optimizadas de vuelta en el directorio de Jekyll

cp -r /tmp/jekyll/* ~/www.garron.me/_site/

Ahora si subo el contenido de _site/ a Amazon, el sitio será servido al público con imagenes optmizadas, en todo el proceso se ahorraron 20 megas.

Se que esta no es en realidad una guía, y no pretende serlo, existe suficiente información en el sito de Grunt, solo es una introducción para quienes no conocen esta herramienta.

Espero y les sirva.