Creando un entorno de trabajo para Javascript con Grunt

JavaScript

Navegando por la red encontré referencia a Grunt y he de reconocer que me llamo la atención aunque desconocía lo que era y para que servía. Así que me dispuse a investigar un poco y decidí empezar a usarlo pues tiene cosas muy interesantes.

Grunt es una aplicación de NodeJS que permite automatizar tareas para Javascript. Por ejemplo, de una manera muy sencilla podemos concatenar todos nuestros ficheros js en uno solo y a la vez minificarlos para ahorrar tamaño de descarga.

En mi caso me he creado un pequeño entorno que lo que hace abrirme una conexión de servidor web (a sí no tengo que tener activado MAMP) y a la vez que escucha cualquier cambio que realizo en mis ficheros js, cuando esto se produce me concatena todos los ficheros en uno solo a la vez que me recarga la conexión para tener la información actualizada de mis javascript. Suena bien no?

Primero debemos tener NodeJS instalado y es tan fácil como ir a su página web y descargarnos el paquete para nuestro sistema operativo y ejecutarlo.

Ahora instalaremos el cliente Grunt en nuestro sistema para todos los usuarios (-g)

npm install -g grunt-cli

Hay dos ficheros importantes que usaremos

package.json

Donde se declaran las dependencias de Grunt y podemos hacerlo de manera manual o instalarlas de forma automática con npm usando –save-dev.

Gruntfile.js

Aquí es donde configuraremos todas las tareas que vamos a realizar

Bueno pues empecemos a configurar todo esto.

Primero creamos de forma manual el fichero package.json con la información básica de nuestro proyecto.

y ahora instalamos de forma manual las dependencias que usaremos

Para concatenar ficheros js

sudo npm install grunt-contrib-concat –save-dev

Para minificarlos (quitar espacios y saltos de línea y así reducir su tamaño)

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

Para tener una escucha ante cualquier modificación de nuestros ficheros js para que en tal caso ejecute una tarea

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

Para crear la conexión de nuestro servidor web

sudo npm install grunt-contrib-connect –save-dev

Para usar connect y watch

sudo npm install connect-livereload –save-dev

Para poder abrir la url de nuestro proyecto

sudo npm install grunt-open –save-dev

Con esto nuestro fichero package.json estará preparado, en mi caso queda:

 

 

Para asegurarnos de tener todas las dependencias instaladas o si las hemos añadido las dependencias de forma manual las instalaremos

sudo npm install

Ahora solo nos queda configurar nuestro fichero Gruntfile.js con las tareas que realizaremos

Y wala si todo ha ido bien ejecutaremos

grunt

y se nos abrirá en el navegador una pestaña con nuestro index.html donde si usamos javascript que cargan recursos no nos dará problemas y en la consola aparecerá

Donde  nos indica las tareas realizadas y que esta a la espera de las notificaciones de cambios de nuestro javascript.

Running “concat:dist” (concat) task
File js/MiProyecto.js created.
Running “uglify:dist” (uglify) task
File js/MiProyecto.min.js created: 3.48 kB → 2.36 kB
Running “connect:livereload” (connect) task
Started connect web server on http://localhost:9000

Running “open:dev” (open) task

Running “watch” task
Waiting…

y si por ejemplo cambiamos un fichero js por consola nos dirá que se ha cambiado y volverá a ejecutar la tarea build

Running “watch” task
Waiting…
>> File “src/carga.js” changed.
Running “concat:dist” (concat) task
File js/MiProyecto.js created.
Running “uglify:dist” (uglify) task
File js/MiProyecto.min.js created: 3.48 kB → 2.36 kB
Running “watch” task
Completed in 0.033s at Mon May 26 2014 13:17:38 GMT+0200 (CEST) – Waiting…

Y con esto ya tenemos nuestro entorno preparado para automatizar algunas tareas. Estas son solo unas pocas de muchas de las que se pueden realizar. Comprobar nuestros js, copiar los ficheros que queramos en una carpeta por ejemplo para tener solo lo que deberemos copiar al servidor ftp, incluso podemos hacer que lo suba automáticamente…

Espero que os sirva de utilidad y os parezca tan interesante como me ha parecido a mi.

Deja un comentario

  • (will not be published)


1 + 3 =