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](https://paraisolinux.com/introduccion- 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
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:
[xml] { “directory”: “app/components” } [/xml]
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:
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
[xml]
[/xml]
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:
[js] module.exports = function(grunt) {
grunt.initConfig({
});
}; [/js]
Y dentro de eso se configuran los plugins, en nuestro caso seria algo asi:
[js] 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’]); };
[/js]
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:
[js] … “main”: “gruntfile.js”, … [/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.