Iniciarse con Bower y Grunt para el desarrollo web

Los que se dedican al desarrollo web sabran que no es posible quedarse atras, salen nuevas tecnologias, frameworks, estandares, herramientas, tecnicas y demas, todos los dias! literalmente. Cuando escribi el articulo de pequeña super introduccion al desarrollo web explique unas cuantas y hoy quiero explicar 2 mas. Bower y Grunt.

Veamos primero resumidamente que son:

Bower es un gestor de paquetes y dependencias. Los usuarios de Linux estaran muy familiarizados con esto. Imaginen decirle a bower que instale JQuery UI y que el programa solo descargue ademas Jquery que es una dependencia.

Y no es solo que las baja, sino que hace muchisimo mas facil el trabajo de actualizarlas. Puede parecer poco pero es mucho mas facil y organizado que andar buscando por la web, bajando comprimidos, descomprimiendo, poniendo en la carpeta que corresponde, cuidando las urls y revisando dependendencias.

Grunt por otro lado es un automatizador de tareas. Nos alivia de las tareas repetitivas, ejemplos:

  • Si usas sass puedes hacer que grunt preste atencion a los cambios de archivos y los compile cuando corresponda
  • Puede minificar y unir todos los archivos js de una carpeta
  • Puedes realizar test unitarios automaticamente
  • Puedes hacer deploys de base de datos mysql
  • Usar livereload
  • Y tiene muchos mas plugins para un monton de lenguajes y frameworks

grunt y bower

Vamos a ver como usar estas 2 herramientas en un proyecto pequeño.

Paso 1: tener instalado Node.js. Ambas herramientas necesitan de Node

Paso 2: instalar bower de manera global con el siguiente comando(esto se hace solo una vez en cada pc)

sudo npm install -g bower

Paso 3: Crear la carpeta donde estara su proyecto y se mueven con la consola del sistema operativo hasta estar dentro de ella. Y una vez dentro ejecutan el comando

bower init

Esto les hara varias preguntas como nombre del proyecto, version, descripcion, licencia, autores y mas. Es suficiente con que le den un nombre al proyecto y enter a todas las otras opciones, no son importantes por ahora.

Al terminar de ejecutarse ese comando se creara un archivo llamado bower.json que contendra el contenido de las preguntas que les hicieron.

Paso 4: Crean un archivo llamado .bowerrc con este unico contenido:

{
   "directory": "app/components"
}

Ahi es donde se instalaran los paquetes. Pueden cambiar eso por la direccion que quieran. Algunos usan 'public/vendor'.

Paso 5: Ahora pueden buscar e instalar lo que quieran. Por ejemplo, vamos a instalar jquery-ui. Buscamos el paquete con el comando

bower search jquery-ui

y les saldra algo asi:

jquery ui bower

Identifican el paquete, en este caso el primero, y lo instalan con el comando:

bower install jquery-ui --save

Y eso instalara lo que desean mas las dependencias. Pueden comprobar que se bajaron cosas en la carpeta que eligieron, en nuestro caso: app/components y ademas se actualiza el archivo bower.json

Paso 6: Se usa muy sencillamente

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="app/components/jquery/dist/jquery.js"></script>
	<script src="app/components/jquery-ui/ui/jquery-ui.js"></script>
</head>
<body>

</body>
</html>

Bower tiene otros comandos que probablemente quieras conocer:

  • bower info . Es para ver info del paquete. Version instalada, dependencias, versiones disponibles, etc.
  • bower uninstall . Es para desinstalar algun paquete
  • bower list. Es para ver que paquetes tienes instalados
  • bower help. Es para ver comandos y opciones.

Paso 7: Ahora a instalar Grunt con el siguiente comando(esto solo se hace una vez en cada pc)

sudo npm install -g grunt-cli

Paso 8: Para usar grunt necesitamos 2 archivos: package.json y Gruntfile.js. Para el primero abra que ejecutar el siguiente comando

npm init

y se les preguntaran algunas cosas simples para crear el archivo.

Paso 9: Necesitan instalar grunt para el proyecto, eso se hace con el comando

npm install grunt --save-dev

Lo del save-dev es para que ese paquete aparezca en las dependencias.

Paso 10: Ahora toca instalar los plugins que quieran usar. Como habia dicho hay para practicamente cualquier cosa que deseen hacer, puden buscarlos aqui o aqui. En este caso vamos a suponer que tenemos un monton de archivos javascript en una carpeta y que queremos unirlos en un solo archivo.

Vamos a instalar entonces 2 plugins:

npm install grunt-contrib-concat grunt-contrib-watch --save-dev

El primero es el que se encarga de concatenar(unit) los archivos, el segundo lo que hace es vigilar los cambios. Asi la tarea se hace automaticamente cuando se crea o modifica un archivo.

Al terminar de instalar todo veran que el archivo package.json se ha actualizado. Luego explicare para que nos sirve eso.

Paso 11: Creen un archivo llamado gruntfile.js(o como se les de la gana, pero gruntfile es lo mas 'comun'). En este archivo es donde le diremos a grunt lo que queremos que haga.

Este archivo siempre tiene lo siguiente:

module.exports = function(grunt) {

    grunt.initConfig({

    });

};

Y dentro de eso se configuran los plugins, en nuestro caso seria algo asi:

module.exports = function(grunt) {

    grunt.initConfig({

        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: 'javascript/mis_js/*.js',
                dest: 'javascript/main.js'
            }
        },
        watch: {
			files: 'javascript/mis_js/*.js',
			tasks: ['concat']
		}
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['watch']);
};

Ahora en el archivo package.json deben poner el nombre del archivo gruntfile.js(o el que hayan elegido) en vez de index.js que es el default. Quedaria algo asi:

...
"main": "gruntfile.js",
...

Cada plugin se configura diferente, pero en general es muy facil entender que hace la tarea, incluso si no se sabe nada de node o javascript. Por ej: la tarea 'concat' se une todos los archivos js de la carpeta javascript/mis_js en un archivo llamado main.js. Y la tarea 'watch' se fija los cambios en los archivos js en la carpeta javascript/mis_js y cuando algo cambia, ejecuta la tarea concat. Sencillo verdad?

Y fijense que al final he definido una tarea 'default'. Esto es para que esa sea la tarea por default que se ejecuta al usar el comando

grunt

en la carpeta del proyecto

bower.json y package.json sirven para que cuando tengan que mover su proyecto a otro lado, sea el servidor, otra pc o lo que sea, no tengan que subir cada una de las dependencias, sino que son esos archivos mas un comando ya pueden recrear todo el proyecto de nuevo, bueno en realidad solo la parte de las cosas que se bajan, o sea los paquetes de de bower y los plugins de grunt.

Espero que este pequeño tutorial les sirva, es solo una introduccion pero creo que ahora podran sacarle provecho a esas herramientas. Y si les gusto espero que esten suscriptos al blog porque en algun momento hablare de yeoman para hacer todos estos pasos de la manera mas sencilla posible.

Se bueno y comparte!
Publicado el Categorías Diseño y Desarrollo Web

Acerca de Perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

Comenta!

4 Comentarios activo "Iniciarse con Bower y Grunt para el desarrollo web"

avatar
Ordenar por:   Nuevos | Viejos
Mané Cuervo
Mané Cuervo

como tendria que hacer si tengo mas de un proyecto? o sea instalo el programa por unica vez en la maquina. Depues esto tiene algo de compatibilidad con eclipse, o sea si yo creo un archivo nuevo en mi proyecto ¿me lo estaria dando una estructura con los plugins que instale?¿o a este archivo tendria que incluirlo en los otros? estoy hablando en el caso de bower,
En cuanto a grunt la verdad no entendi mucho pero sirve principalmente para fusionar archivos js verdad?

sefsinalas

A ver, son varias preguntas.
-bower y grunt se instalan una vez en la pc, en el post creo que lo que se instala una vez en la maquina, lo aclare.
-Lo de eclipse no lo se porque no lo uso, pero seguro que si, esos editores asi tan famosos siempre tienen plugins que ayudan.
-La pregunta de la estructura no la entendi.
- grunt sirve para mucho mas que solo fusionar archivos js, eso es solo el ejemplo que use en el articulo. Lee la primer parte para entender lo que hace grunt

Mané Cuervo
Mané Cuervo

bien la pregunta que no entendiste se refiere a:
estoy dentro del proyecto con cualquier editor (sea eclipse, o un gedit, gphpedit ...) voy al menu y hago esto
archivo-> nuevo escribo el nombre "pongamosle archivonuevo.html" ¿me generaría ese archivo así?

además en el caso que la anterior suposición sea cierta, ¿que pasa si uno de los archivos no utiliza jquery-ui.js tendría que sacarlo a mano, o esta herramienta se daría cuenta y le sacaría sola?

sefsinalas

Esas lineas de codigo no se generan solas, las tenes que agregar a mano, asi que podes elegir cual agregar

wpDiscuz