Hasta ahora has aprendido como hacer cosas como compilar código, poner prefijos automáticamente, limpiar, comprimir y minificar todo con solo escribir unas cuantas palabras. Esto es magnífico, pero ¿Qué tal si tienes un proyecto que necesitara ejecutar varios de éstos comandos, uno tras otro, una y otra vez hasta que completes tu trabajo? Por ejemplo:

1. Compilar preprocesador a CSS
2. Poner prefijos automáticos en CSS
3. Limpiar CSS
4. Compilar Jade a HTML
5. Concatenar y Minificar Javascript

Aún con unas cuantas palabras por comando se volvería rápidamente tedioso a través de un típico proceso de creación de un sitio.

Aquí es donde los "Ejecutores de Tareas" entran en escena para salvar el día. Con los ejecutores de tareas puedes configurar un solo archivo dentro de tu proyecto que define todas las tareas que necesitas para ejecutar en tu proyecto, y el orden en que necesitan ejecutarse. En éste archivo puedes entonces definir comandos personalizados que puedes usar para ejecutar todas esas tareas a la vez.

Aprenderás cómo configurar ejecutores de tareas en ésta forma durante éste tutorial, y en el proceso también verás un ejemplo de llevar scripts de paquetes Bower para un despliegue eficiente en tus proyectos.

Nota: Éste tutorial asume que has completado todos los tutoriales previos en ésta serie. Si no lo has hecho, encontrarás útil leerlos antes de iniciar aquí.

Los "Dos Grandes" Ejecutores de Tareas

Hay actualmente varios ejecutores de tareas disponibles, sin embargo para los fines de éste tutorial nos enfocaremos en los dos más populares: Grunt y Gulp.

Hay varias diferencias técnicas entre los dos proyectos, que no voy a abordar ahora. Ni te diré cuál de los dos deberías usar. En cambio, recomiendo seguir los pasos para usar ambos y luego decidir por tí mismo cual prefieres.

Crea un Proyecto de Ejemplo

Vamos a crear un proyecto que monitorea y automáticamente compila Stylus y Jade, y optimiza CSS y Javascript. Lograremos ésto primero usando Grunt, y luego (en el próximo tutorial) usando Gulp.

Para empezar, necesitaremos configurar un proyecto de ejemplo con algunos archivos dentro en los que pueda operar nuestro ejecutor de tareas. Crea un directorio llamado "Grunt Project", luego añade un subdirectorio llamado "build" y un subdirectorio llamado "source".

En el directorio "source" agrega dos nuevos subdirectorios llamados "stylus", "jade". Añade unos cuantos archivos de ejemplo del tipo apropiado a cada directorio.

Los archivos pueden contener cualquier código que quieras, solo para que tengas algo que puedas ver el proceso de compilación funcionando.

Consejo: Si no estás seguro que código añadir, intenta tomar algún código de ejemplo de Codepen: ejemplos de código etiquetados con stylus, ejemplos de código etiquetados con jade.

Por ejemplo:

Posteriormente también vamos a aprovechar lo que aprendimos de Bower en la lección anterior y haremos descargas de jQuery y Modernizr, que combinaremos y minificaremos después.

Ejecuta los comandos:

bower install jquery --save

bower install modernizr --save

Ahora, haz un duplicado de todo tu directorio de proyecto y renómbralo "Gulp Project".

De ésta forma puedes seguir los pasos de usar Grunt dentro de tu directorio "Grunt Project", y los pasos para usar Gulp dentro de tu directorio "Gulp Project".

Comenzando con Grunt

Instala la CLI (Interfaz de Línea de Comandos) de Grunt 

Para que funcionen los comandos de Grunt necesitarás instalar su CLI  (Interfaz de Línea de Comandos). Instálala globalmente con:

[sudo] npm install -g grunt-cli

Configura el Proyecto para Grunt

Añade el archivo package.json

Cada proyecto que utiliza Grunt necesitará un archivo "package.json" en el directorio raíz.

Cubrimos la configuración de un archivo "package.json" al usar el comando npm init en el tutorial anterior Domando Paquetes de Terceros. Si no has completado esa sección aún por favor regresa y léela ahora.

Instala el paquete Grunt

Instala Grunt en tu proyecto y guárdalo como una dependencia de desarrollo con:

npm install grunt --save-dev

Añade Gruntfile

Cada proyecto Grunt también necesita tener lo que se llama un Gruntfile en el directorio raíz.

Un Gruntfile es un archivo llamado "Gruntfile.js", o "Gruntfile.coffee" Si prefieres escribir en CoffeScript. En nuestro caso trabajaremos con Javascript, así que agrega un archivo llamado "Gruntfile.js" a tu directorio raíz.

Llenar tu Gruntfile te permitirá determinar que comandos desencadenarán las tareas a ejecutarse. Puedes comenzar con sólo agregar una función básica  a tu Gruntfile. Estableceremos tu código de configuración  más tarde.

Agrega el siguiente código a tu Gruntfile.js:

module.exports = function(grunt) {

};

Instala Plugins de Grunt

Recordarás que cuando querías usar paquetes con npm o Bower, tenías que buscar en el lugar correcto para obtener las versiones diseñadas para trabajar con cada sistema.

Lo mismo aplica cuando se usan paquetes con Grunt. A través de Grunt puedes accesar a un ecosistema de plugins, que son esencialmente elementos contenedores alrededor de paquetes npm. Éstos plugins aún son entregados vía npm, pero están especialmente equipados para trabajar con Grunt

Por ejemplo, en lugar del paquete npm UglifyJS, con Grunt podrías usar el plugin "grunt-contrib-uglify".

Puedes buscar plugins para Grunt en http://gruntjs.com/plugins

Para nuestro proyecto instalaremos éstos seis plugins para Grunt:

• https://www.npmjs.com/package/grunt-contrib-stylus
• https//www.npmjs.com/package/grunt-autoprefixer
• https://www.npmjs.com/package/grunt-contrib-cssmin
• https://www.npmjs.com/package/grunt-contrib-jade
• https://www.npmjs.com/package/grunt-contrib-uglify
• https://www.npmjs.com/package/grunt-contrib-watch

Cada uno será instalado en el subdirectorio "node-modules" del directorio de tu proyecto, y guardado como una dependencia de desarrollo.

Ejecuta cada uno de éstos comandos, a la vez, con tu terminal apuntando a tu directorio "Grunt Project":

npm install grunt-contrib-stylus --save-dev

npm install grunt-autoprefixer --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-jade --save-dev

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

npm install grunt-contrib-watch --save-dev

Cuando termines, deberías ver éstos directorios dentro del directorio "node_modules" de tu proyecto:

Habilita Plugins via Gruntfile

Ahora vamos a usar el método grunt.loadNpmTasks para habilitar nuestros plugins.

Dentro de las llaves de tu Gruntfile existente, agregaremos seis líneas, cad una para habilitar un plugin de grunt, así:

module.exports = function(grunt) {

// Load grunt plugins.
 grunt.loadNpmTasks('grunt-contrib-stylus');
 grunt.loadNpmTasks('grunt-autoprefixer');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-jade');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-watch');

};

Éste código registra el nombre de cada plugin como un comando grunt, permitiéndonos usar ese comando para hacer que el plugin ejecute una tarea. Por ejemplo, usaríamos el comando grunt stylus para ejecutar una tarea stylus, grunt autoprefixer para ejecutar una tarea autoprefixer y así sucesivamente.

Configurar Tareas en Gruntfile

Nuestros plugins de grunt están instalados y los comandos a usar ya pueden operar, sin embargo si fueras a usarlos ahora no verías que ocurriera algo. La razón es que tenemos que establecer alguna configuración para determinar que debería hacer realmente cada tarea.

Ésto se hace al añadir el método grunt.initConfig a tu Gruntfile, y luego pasar la información a través de él que dicta como quieres que se ejecute cada tarea.

Primero, añadiremos el método grunt.initConfig arriba de las líneas que acabas de añadir para cargar los plugins de grunt:

grunt.initConfig();

Ahora haremos espacio para pasar nuestra información de configuración. Agregamos llaves de apertura y cierre dentro de paréntesis, luego agregamos una línea vacía entre ellas:

grunt.initConfig({

});

Ahora podemos continuar y agregar la configuración para cada uno de los plugins que instalamos.

Cada plugin tiene su propia gama de ajustes que puedes usar, y éstas opciones están detalladas en las páginas de enlace en la sección anterior "Instalar Plugins de Grunt".

También puedes leer los detalles completos sobre configurar tareas de Grunt aquí: http://gruntjs.com/configuring-tasks

Ejemplo de Configuración de Tarea Grunt: Stylus

Vamos a comenzar añadiendo la configuración para nuestra tarea stylus.

Entre las llaves que acabas de añadir, en la línea vacía, agrega el siguiente código:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Tu Gruntfile debería verse así:

module.exports = function(grunt) {

  grunt.initConfig({

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

  });

  // Load grunt plugins.
  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
};

Vamos a desglosar el código que hemos agregado aquí. No desglosaremos cada tarea, pero viendo ésta debería darte una idea del tipo de sintaxis utilizada cuando se compacta la configuración de la tarea en Grunt.

Como mencioné anteriormente, cada plugin tiene diferentes opciones de configuración así que cuando estés empleando un nuevo plugin fíjate bien en las instrucciones de uso que ofrece.

Lo primero que hemos hecho es agregar una entrada a nuestra configuración para nuestra tarea stylus con el código:

    stylus: {

    },

Dentro de ésta hemos agregado una entrada compile para controlar lo que ocurre durante la compilación:

    stylus: {
      compile: {

      }
    },

Dentro de la tarea compile hemos creado un área de options (opciones).

Hemos usado esa área para establecer la opción compress en false, porque usaremos nuestra optimización de código posteriormente.

También hemos establecido la opción paths en ['source/stylus'] así si Stylus ve la directiva @import mientras la compila buscará archivos para importar en el directorio "source/stylus" del proyecto:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        }
      }
    },

Luego después del área  options hemos agregado un área files para controlar el directorio de salida  y el nombre del archivo, así como el directorio fuente o de entrada y el nombre del archivo.

Hemos establecido la ubicación de salida de nuestro archivo CSS compilado que sea 'build/style.css', mientras el archivo Stylus a procesar es 'source/stylus/main.styl'.

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Ahora, con tu terminal apuntando a tu principal directorio raíz ejecuta el comando:

grunt stylus

Observa dentro de tu directorio "build" y deberías ver un recientemente compilado archivo "style.css"  .

Configura las Tareas Restantes

Avanzaremos ahora rápidamente a través de la configuración de cada tarea restante. Inserta cada bloque de código de configuración después del que agregaste previamente.

Autoprefixer

Agrega éste código:

    autoprefixer: {
      compile: {
        files: {
          'build/style.css': 'build/style.css'
        },
      },
    },

Ejecuta la tarea autoprefixer con:

grunt autoprefixer

Si inspeccionas tu archivo "build/style.css" deberías ver ahora prefijos añadidos donde se requerían.

cssmin

Agrega éste código:

    cssmin: {
      clean: {
        files: {
          'build/style.css': 'build/style.css'
        }
      }
    },

Ejecuta la tarea cssmin con:

grunt cssmin

Si observas tu archivo "build/style.css" otra vez, verás que ha sido limpiado y comprimido por tí.

Jade

Agrega éste codigo:

    jade: {
      compile: {
        files: [{
          expand: true,
          cwd: "source/jade",
          src: "*.jade",
          dest: "build",
          ext: ".html"
        }]
      }
    },

Ejecuta la tarea jade con:

grunt jade

Si observas dentro de tu directorio "build", deberías ver un archivo HTML para corresponder con cada archivo Jade que tenías en tu directorio "source/jade".

Uglify

Agrega éste código:

    uglify: {
      bower_js_files: {
        files: {
          'build/output.min.js': [
            'bower_components/jquery/dist/jquery.js',
            'bower_components/modernizr/modernizr.js'
          ]
        }
      }
    },

En éste ejemplo verás que estamos señalando las ubicaciones de los componentes Bower que instalamos previamente.

Tomaremos las versiones expandidas de jQuery y Modernizr de nuestro directorio "bower_components", luego los concatenamos y minificamos en un nuevo archivo llamado "output.min.js". Ésta es una gran forma de desplegar scripts que estás manejando Bower.

Ejecuta la tarea uglify con:

grunt uglify

Deberías ver ahora un nuevo archivo "output.min.js" en tu directorio "build".

Agrega una Tarea "watch"

Hasta ahora podría parecer como si solo remplazamos un comando para hacer una cierta tarea con otro comando, pero lo que hemos estado haciendo realmente es preparar el terreno donde Grunt realmente empezará a brillar.

La clave es la hablidad de Grunt para tener una tarea ejecutándose tras otra. Así que vamos ahora a configurar una tarea watch que monitoreará los cambios en ciertos archivos, luego ejecutará nuestras tareas stylus y jade automáticamente por nosotros.

Agrega éste código:

    watch: {
      stylus: {
        files: [ 'source/stylus/*.styl' ],
        tasks: ['stylus', 'autoprefixer', 'cssmin']
      },
      jade: {
        files: [ 'source/jade/*.jade' ],
        tasks: ['jade']
      }
    },

Primero hemos agregado nuestra tarea watch, y entonces dentro hemos establecido un área para stylus y para jade.

La opción files  establece que archivos deberían monitorearse para cualquier cambio. La opción tasks establece que tareas deben ser ejecutadas cuando ocurren cambios, y en que orden.

Para stylus, hemos establecido la tarea watch para monitorear todos los archivos ".styl" en el directorio "source/stylus", y cuando vea cambios ejecutará las tareas stylus, autoprefixer y cssmin en ese orden.

Así ahora cuando la tarea watch está ejecutándose, todo lo que tienes que hacer is guardar cualquier archivo Stylus y automáticamente obtendrás un archivo CSS compilado, con prefijos y optimizado escrito en el directorio "build" por tí.

Igualmente para jade, hemos establecido que todos los archivos ".jade" en el directorio "source/jade" sean monitoreados, y cuando uno es guardado la tarea jade automáticamente ejecutará y compilará el correspondiente archivo HTML en el directorio "build".

Ejecuta la tarea watch con:

grunt watch

Deténlo de nuevo ya sea:

• Cerrando la terminal
• Presionando CTRL + C

Agrega la Tarea "por defecto"

A estas alturas podrías preguntarte, ¿Qué hay sobre la tarea uglify de Javascript?

La razón por la que no la incluímos con la tarea watch es que no vas a hacer cambios a los archivos jQuery y Modernizr que la tarea uglify está procesando. Así debido a que la tarea watch solo responde a cambios nunca sería desencadenado para procesar tu Javascript.

En cambio, vamos a hacer uso de la tarea default que puede ser establecida en tu Gruntfile. Ésta es la tarea que será ejecutada si usas el comando grunt sin que se le agregue nada más.

Después de tu última línea grunt.loadNpmTasks, pero antes de la llave de cierre }; del archivo, agrega ésta línea:

  grunt.registerTask('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']);

Ésto establece que la tarea default ejecute stylus, autoprefixer, cssmin, jade y luego uglify. 

Así que ahora si ejecutas el comando grunt sin nada más después de él, compilará tu proyecto entero, incluído tu Javascript.

En el Próximo Tutorial

Próximamente repetiremos el proceso que hemos aprendido, pero usando Gulp para manejar nuestra ejecución de tarea  en lugar de Grunt.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!