Spanish (Español) translation by Javier Salesi (you can also view the original English article)
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:
- Compilar preprocesador a CSS
- Poner prefijos automáticos en CSS
- Limpiar CSS
- Compilar Jade a HTML
- 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!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post