Introducción a Bower

En los últimos años hemos vivido una revolución en el desarrollo de aplicaciones web, incluyendo las aplicaciones híbridas para dispositivos móviles, en lo que respecta al frontend (interfaces/interacción con el usuario) gracias al imparable auge de herramientas y frameworks como AngularJS, jQuery, Backbone.js, Bootstrap o Ionic. Esta revolución incluso ha llegado al backend de la mano de Node.js y sus frameworks como Express.

Bower es un gestor de paquetes que nos ayudará en la utilización de todas estas APIs y frameworks de JavaScript y CSS. Gracias a Bower no tendremos que descargar y copiar manualmente en los proyectos estas dependencias, haciendo asimismo su actualización muy sencilla.

Instalación

Bower requiere npm, el gestor de paquetes de Node.js (ambos se instalan juntos). También necesitaremos tener instalado git ya que generalmente las dependencias las obtendremos directamente de este tipo de repositorios, encontrándose muchas de ellas en GitHub.

Windows 7

Hay instaladores tanto para Node.js como para git. Puesto que se trata de herramientas que usaremos a través de la línea de comandos tendremos que añadirlas a la variable PATH; el instalador de Node.js ya lo hace por defecto mientras que al instalar git podemos solicitarlo para evitar tener que hacerlo manualmente:

Instalamos Bower

npm install -g bower

Ubuntu 14.04

npm se encuentra en los repositorios oficiales y podemos instalar esta versión con el comando

sudo apt-get install nodejs

Personalmente prefiero utilizar una versión más actual utilizando los scripts disponibles en https://github.com/nodesource/distributions

curl -sL https://deb.nodesource.com/setup_0.12 | sudo -E bash -
sudo apt-get install -y nodejs

Instalamos git:

sudo apt-get install git

Y Bower:

sudo npm install -g bower

Utilización

Para incorporar Bower a un proyecto lo más sencillo es ejecutar el siguiente comando en el directorio raíz del mismo

bower install

Se ejecutará un asistente que creará el fichero bower.json. Generalmente será suficiente con proporcionar al asistente el nombre del proyecto y pulsar Enter para utilizar el valor por defecto de cada opción.

El fichero generado de esta forma será similiar al siguiente

{
  "name": "mi proyecto",
  "version": "0.0.0",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Las dependencias se añadirán a este json dentro del array dependencies:

{
  "name": "mi proyecto",
  "version": "0.0.0",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.3.0",
    "jquery": "",
    "backbone": "1.1.2",
    "sweetalert": "https://github.com/t4t5/sweetalert.git"
  }
}

Para cada dependencia se proporcionará su nombre y versión o localización física del paquete según los siguientes criterios:

• nombre. El nombre de la dependencia lo podemos obtener de la página oficial del proyecto en las instrucciones de uso/instalación. También podemos buscar una dependencia por su nombre con el comando bower search o en la web de Bower.
• Versión\ubicación. Tenemos varias opciones:
  • Dejarlo vacio. Se instalará la última versión disponible.
  • Indicar exactamente el número de versión deseado.
  • Indicar exactamente el número de versión deseado precedido de ~. Esto hará que se instale la última actualización de seguridad correspondiente a la versión indicada comprobando el tercer valor del número de versión.
  • Ruta absoluta al repositorio git, ya sea local o remota.

También se pueden añadir dependencias a este fichero mediante el comando

bower install <paquete>#<versión> --save

Podemos comprobar de forma visual el árbol de dependencias y las últimas versiones de las mismas con el comando:

bower list

Ahora instalamos\actualizamos las dependencias con el comando

bower update

Las dependencias se descargarán en el directorio bower_components excluyendo los directorios definidos en bower.json en el array ignore ya que por ejemplo generalmente no querremos descargarnos los tests.

Se puede configurar el comportamiento de Bower para el proyecto mediante el fichero oculto .bowerrc ubicado en el mismo directorio que bower.json . La opción más interesante es la de configurar el directorio en el que se instalarán las dependencias, en un proyecto Maven probablemente queramos tener lo siguiente:

{
  "directory" : "src/main/webapp/libs"
}

Por último, ya sólo nos queda enlazar en los .html los ficheros de CSS, JavaScript, etc que sean necesarios.