miércoles, 25 de noviembre de 2015

¿Qué es Bower? Breve tutorial para usarlo en tus proyectos

Hace un tiempo estuve optimizando un proyecto casero de app que hago desde hace unos meses con cordova. Lo típico, soy uno solo en el proyecto y dispongo de poco tiempo (mi tiempo libre que cada vez escasea más). Por tanto siempre voy dejando notas con los típicos "TODO" con temas y uno de ellos era usar bower para la gestión de librerías que uso en el proyecto.

Bower es un gestor de paquetes de ámbito cliente muy popular entre la comunidad javascript. Si trabajas con tecnologías Microsoft que sepas que está previsto que Bower esté integrado en Visual Studio en versión 2015 y también Grunt / Gulp que son librerías javascript que sirven para automatizar tareas javascript del tipo bundling y minificación de ficheros js. Por tanto tarde o temprano al pasar a ASP.NET 5.0 acabarás usando Bower. En caso que no trabajes con tecnologías Microsoft también podrías seguir los pasos del tutorial y usarlo en tu proyecto sin problema.

Como seguramente sabéis, Microsoft tiene su propio gestor de paquetes que es Nuget. Muchos diréis que Nuget es un gestor de paquetes de ámbito .net pero lo cierto es que también se usa para descargar paquetes javascript/css como Angular o Bootstrap. ¿Por qué MS apuesta por integrar Bower en Visual Studio si ya tiene Nuget? Bueno, opino que Microsoft se está sumando a la tendencia de la comunidad open source lo cual me parece genial. Bower, descarga los paquetes de Git Hub que es la comunidad más popular de repositorios open source. Es muy posible que plugins populares de Angular (por poner algún ejemplo) no existan en Nuget… ya que probablemente parte de desarrolladores de plugins javascript no tenga por costumbre subirlos también allí.

Bueno no me enrollo más y empiezo a detallar los pasos para usar Bower en un proyecto.

Si usas Visual Studio 2015 verás que dispones de cierta integración de Bower con el IDE. En caso que uses versiones anteriores o que no dispongas de Visual Studio podrías seguir estos pasos y usarlo para gestionar paquetes cliente.

Instalar Git (Windows)


Bower usa Git para descargar paquetes de GitHub. Se trata de seguir los pasos de instalación, nos dará a escoger entre varias opciones interesa poder usar Git desde la línea de comandos de Windows. En principio si hemos escogido la opción correcta no tendremos que preocuparnos de las variables de entorno.

Instalar Node


Necesitamos Npm (Node Package manager) para instalar Bower o actualizar la versión de la librería. Una vez instalado Node nos debería dejar lanzar este comando desde la línea de comandos de Windows. En caso que no reconozca el comando npm tendrías que crear manualmente el path en variables de entorno (no debería sucederte el instalable de Node se encarga).
 
npm install bower -g

Inicializar Bower en tu Proyecto


Se trata de abrir una línea de comandos, situarte en la root de tu proyecto y lanzar el siguiente comando.
 
bower init
En la siguiente pantalla te pide información sobre tu proyecto, asegúrate de definirlo como privado (a no ser que quieras subir tu proyecto a GitHub) y el resto puedes informar lo básico como ves en la imagen.


Al finalizar este paso deberías tener en la root de tu proyecto un fichero como .json como este.
{
  "name": "areaTIC Bower Introduction",
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "private": true
}
Este fichero es donde tendrás que indicar que paquetes quieres que se incluyan en tu proyecto y puedes especificar una versión concreta.

Añadir o Actualizar un paquete


Si no usas Visual Studio has de hacerlo vía línea de comando, siempre que necesites añadir o actualizar una librería en tu proyecto tendrás que usar el comando bower install. Por ejemplo, si quieres añadir una versión concreta de Angular a tu proyecto lo podrías hacer con el siguiente comando:
bower install angular#1.4.7
Si quieres añadir la última versión:
bower install angular
Esto descarga la librería en la carpeta bower_components del proyecto. Adicionalmente si queremos dejar constancia en el fichero bower.json del paquete que se ha añadido al proyecto, hubiésemos pasado el parámetro --save.
bower install angular#1.4.7 --save
Actualiza automáticamente la dependencia en el fichero bower.json del proyecto.
{
  "name": "areaTIC Bower Introduction",
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "private": true, 
  "dependencies": {
    "angular": "1.4.7"
  }
}
Otra opción, sería añadir la librería al bloque dependencies del fichero manualmente y usar el siguiente comando que se encarga de actualizar las librerías del proyecto con la última versión o la versión especificada en el fichero .json.
bower update
Si tienes Visual Studio 2015 instalado, se nota cierta integración con el IDE si abres el fichero .json con el editor y expandes el menú contextual sobre una referencia a un paquete en dependencies.


Para más info sobre comandos y la librería en general recomiendo consultar la doc. oficial.

Hasta aquí el post de hoy, espero sea de utilidad recordaros que aportaciones, dudas, comentarios y demás siempre son bienvenidos en areaTIC. Te animo a participar usando las redes sociales! Hasta la próxima!

No hay comentarios:

Publicar un comentario