Ver contenido
carlosazaustre.es carlosazaustre.es

Automatizar tareas en JavaScript con Grunt.js

🗓 | 💻 Desarrollo | 🕐 1 minutos de lectura | 💬 Comments

Grunt.js 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, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON.

Automatización de tareas con Grunt JS

A continuación muestro como sería este fichero para automatizar las tareas de arranque del servidor y preprocesamiento de archivos stylus a CSS y su minificación.

Lo primero que necesitamos es instalar Grunt de manera global en nuestro equipo, doy por hecho que ya tenemos Node.js instalado, si no es así pásate por esta entrada.

Para ello tecleamos:

Grunt posee diversos plugins para tareas específicas, nosotros usaremos grunt-contrib-watch, grunt-contrib-stylusgrunt-contrib-cssmin y grunt-contrib-bg-shell. Estas librerías nos permitirán vigilar cambiso que hagamos en determinados directorios para así actuar y ejecutar la tarea que queremos, preprocesar stylus y convertirlo a CSS, minificar el CSS y ejecutar instrucciones por linea de comandos respectivamente.

Para cargar los plugins, debemos incluir en nuestro fichero Gruntfile.js las siguientes líneas:

las tareas que vamos a definir serán las siguientes:

Procedemos a crear las tareas:

  • bgShell:runNode con ella indicamos un comando para ejecutar por el inteerprete.
  • stylus: Con ella preprocesamos los ficheros .styl que tengamos a un único fichero .css (Stylus es un preprocesador de CSS como lo son Compass, Sass, Less,… pero más hipster porque funciona bajo Node.js ;)
  • cssmin: Con esto minificamos el fichero css resultante en una sola línea de texto para que sea menos pesado y nuestra aplicación web tarde menos en cargar
  • watch: Gracias a ella cualquier cambio que hagamos en un fichero CSS o STYLUS se dará cuenta y ejecutará el preprocesamiento para que no tengamos que preocuparnos de resetear nada.

El código para definir las tareas sería algo así:

Para arrancar nuestra aplicacieon y hacer correr las tareas, en lugar de ejecutar node app.js por ejemplo, tendríamos que ejecutar

Puedes ver un ejemplo completo en el siguiente repositorio grunt-node-sandbox. Por supuesto se pueden automatizar más cosas, como por ejemplo minificar el JavaScript, generar archivos preconfigurados de backbone, añadir etiquetas a nuestros archivos con la fecha, nombre de autor, etc.. Un montón de cosas que puedes ver por aquí

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..