Si ya tienes algunas nociones básicas sobre JavaScript, es posible que en algún punto hayas escuchado algo acerca de los procesos de construcción. Relacionado con este mismo build, en este post, aprenderás qué es Grunt en JavaScript, para qué sirve y cuál es su utilidad dentro de tu código.
¿Qué es Grunt en JavaScript?
En términos generales, podemos decir que Grunt es un programa para correr tareas que han sido programadas en JavaScript. De forma más detallada, Grunt en JavaScript es una herramienta que te permitirá simplificar el proceso de construcción (build) de tus proyectos. Del mismo modo en que Maven se usa para automatizar una serie de pasos o procesos a la hora de compilar un código Java, Grunt permite lo mismo pero en JavaScript.
¿Por qué usar Grunt en JavaScript?
Debido a la falta de un compilador que notifique de los posibles fallos, en los lenguajes dinámicos como JavaScript, los test unitarios y las herramientas como JSHint cobran vital importancia a la hora de asegurar la calidad del código. Grunt en JavaScript es excepcional al ayudar con la realización de estas tareas y permitir automatizarlas, lo que evita que se pierda un buen flujo de trabajo a lo largo del ciclo de vida del proyecto.
Grunt te permite realizar las tareas más comunes en tu código JavaScript, como pueden ser el control de calidad (JSLint), la ofuscación, minimización tanto de CSS como de JavaScript, compilación o testing de unidad, entre otros. También te puede servir para automatizar el pase de una batería de test antes de realizar los demás pasos.
Debes tener en mente que minificar y unir el CSS ayudará a que tu página web cargue mucho más rápido. Con Grunt, en términos reales, ganas mucho tiempo y evitas tener que hacer tareas repetitivas. Por último, no olvides que, al estar escrito en JavaScript, Grunt te brindará una gran flexibilidad
Uso de Grunt en JavaScript
Instalar Node.js
Para comenzar a usar Grunt en JavaScript, primero necesitas descargar Node.js, ya que Grunt usa este entorno para funcionar, además del sistema de paquetes que proporciona Node (npm). Por lo tanto, es multiplataforma (siempre que Node.js soporte dicha plataforma).
Instalar Grunt
Una vez hayas instalado Node, ya podrás instalar Grunt. De forma sencilla, puedes hacerlo mediante el comando:
npm install -g grunt-cli
El flag -g indica a npm que quieres instalar del programa de manera global, lo que te permitirá invocarlo desde cualquier parte dentro de la línea de comandos. Con esto ya tendrías Grunt instalado y el siguiente paso sería establecer las dependencias que tendrá tu proyecto y crear un GruntFile.
Dependencias con Grunt en JavaScript
Las dependencias de Grunt se declaran en el archivo package.json en tu proyecto. Puedes añadir manualmente los paquetes que quieras sumar como dependencias a tu proyecto o, cuando descargues nuevos paquetes, añadirlos automáticamente al fichero poniendo el flag –save-dev.
El primer paso es crear tu fichero package.json en la raíz del proyecto. Incluso puedes utilizar el siguiente ejemplo a modo de plantilla:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
}
}
En un inicio es recomendable que descargues dos paquetes, como ejercicio para que te acostumbres al uso. Estos paquetes o plugins añaden funcionalidad a Grunt y puedes encontrar muchos otros de manera libre en la web.
- grunt-contrib-uglify: este plugin ofusca ligeramente tus archivos JavaScript, de manera que tu código estará un poco más protegido ante ojos ajenos. Además, reduce el tamaño de los archivos JavaScript, eliminando espacios innecesarios y reduciendo el tamaño de los nombres de las variables.
- grunt-contrib-concat: este plugin te permitirá compilar varios ficheros en uno, así podrás tener un fichero por clase, por ejemplo limitando las peticiones HTTP.
Para instalar los plugin tan solo debes escribir en la consola:
npm install grunt-contrib-concat --save-dev
Si todo sale de forma correcta, podrás ver cómo se habrán agregado las 3 dependencias al archivo Package.json, de manera que, si otro desarrollador quiere instalar las dependencias de Grunt en tu proyecto, solo tendría que usar el siguiente comando:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
“grunt-contrib-jshint”: "~0.6.3”,
“grunt-contrib-nodeunit”: "~0.2.0”
“grunt-contrib-uglify”: "~0.2.2”
“grunt-contrib-copy”: "~0.4.1”
“grunt-contrib-concat”: "~0.3.0”
}
}
¿Por dónde continuar?
Si te ha resultado interesante aprender sobre Grunt en JavaScript, debes saber que esta es solamente una introducción muy breve de todo lo que implica su uso. Si quieres volverte un experto en este lenguaje, te invitamos a informarte sobre nuestros bootcamps disponibles, en los que encontrarás muchos temarios interesantes enfocados en el sector IT para formarte y convertirte en un profesional del sector en pocos meses. ¡No lo dudes más e inscríbete!
