Automatización de tareas con Grunt JS

Share on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someone
GRUNT.JS Es un corredor de tareas desarrollado en Javascript con Node.js.

Esto es una librería JavaScript que nos permite configurar tareas automáticas y así ahorrarnos tiempo en nuestro desarrollo y despliegue de aplicaciones webs.

Con un simple fichero JS que llamaremos Gruntfile.js, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON.

grunt js task runner

Instalación de Grunt.JS

Previamente tenemos que haber instalado Node.JS, si no lo haz instalado puede descargarlo de la pagina oficial aqui. Los siguiente es ingresar en la terminal y utilizando el manejador de paquetes de node.js instalamos grunt Puede que no se requiera ejecutarlo como administrador, aunque yo siempre lo he necesitado :-).

Package.json

Para iniciar correctamente nuestro proyecto se debe iniciarlizar el archivo Package.json, el cual es el archivo que contiene todas las referencias de librerias que queremos vincular al proyecto. Para inicializarlo vamos a la terminal y colocamos El archivo generado quedaria de la siguiente forma Para colocar la referencia de la libreria de grunt.js en el package.json Para agregar cada uno de los plugins adicionales (por ejemplo JShint y  Uglify) El archivo package.json queda de la siguiente forma  

Gruntfile.JS

El Gruntfile.js es un archivo JavaScript válido que debe encontrarse en el directorio raíz del proyecto, junto al archivo package.json Se compone de las siguientes partes:
  • La función contenedora.
  • Configuración de proyectos y tareas.
  • Carga de plugins.
  • Registro de tareas.
Para cargar los plugins, debemos incluir en nuestro fichero Gruntfile.js las siguientes línea para el caso de plugin Uglify: Para registrar tareas se utiliza grunt.registerTask donde para este caso se desea ejecutar como tarea por defecto uglify, asi que se coloca Viendo la documentacion de nuestro plugin, definimos como se va a comportar   El archivo Gruntfile.js quedaria de la siguiente forma, en el cual se va a ejecutar como tarea por defecto la tarea uglify.   Para ejecutar nuestra tarea por defecto simplemente en la termina colocamos  

Plugins Disponibles

Grunt tiene una gran comunidad de desarrollo, y se pueden encontrar pluging con muchas funcionalidades en el sitio oficial Plugins GruntJS El proyecto ejemplo lo podemos encontra en este link de github el cual realiza las siguientes tareas:
  • minficar JS y CSS
  • Ofuscar JS
  • Concatenar archivos JS y CSS
  • Optimización de imagens
Proyecto de demo npm install -g grunt-cli

Etiquetas:, , , , ,

"Trackback" Enlace desde tu web.