Introducción a Bower

Siguiendo con la linea de herramientas Hot & Sexys de estos días para los web developers que inicie con la entrada de Blog Introducción a Grunt, hoy vengo a hablarles de Bower.

Bower por definición es un administrador de paquetes para la web, ahora eso en español corriente que significa, bueno es una herramienta que nos permite definir que librerías necesitamos usar en nuestra aplicación web y el sistema detecta las dependencias de los paquetes requeridos.

Cuando bower verifica todas las dependencias de los paquetes solicitados y encuentra alguna inconsistencia nos presenta un menos para que escojamos que versión deseamos utilizar.

Ahora se preguntaran que tipo de paquetes están disponibles, bueno los paquetes van desde jQuery a Bootstrap pasando por Linux todo depende de lo que nuestro proyecto necesite, en la actualidad bower cuenta con casi catorce mil paquetes.

1. Como instalar Bower.

Bower es un paquete npm por lo tanto necesitamos NodeJS y con el siguiente comando lo podemos instalar.

$ npm install -g bower

Con el comando anterior bower quedaría disponible para todos los usuarios del sistema.

2. Como usar Bower.

Una vez instalado Bower podemos usarlo inmediatamente en nuestra aplicación para descargar los paquetes que deseemos, imaginemos que necesitamos jQuery en nuestro proyecto para lo cual solo necesitamos utilizar el siguiente comando.

$ bower install jQuery

El anterior comando tendrá la siguiente salida, donde nos informa que version de jQuery fue descargada.

bower cached        git://github.com/jquery/jquery.git#2.1.1
bower validate      2.1.1 against git://github.com/jquery/jquery.git#*
bower install       jQuery#2.1.1

Si se pregunta donde queda jQuery instalado, en el directorio donde se ejecuto la instalación tendría una estructura de archivos similar a la siguiente:

.
└── bower_components
    └── jQuery
        ├── MIT-LICENSE.txt
        ├── bower.json
        ├── dist
        └── src

Como ven se obtiene la version minimizada de jQuery y también los archivos para desarrollo normal de jQuery, depende de nosotros que archivos deseamos incluir en nuestra aplicación.

Si deseamos una versión especifica de paquete debemos proveer esta información en el proceso de install como se muestra en el siguiente comando:

$ bower install <package>#<version>

3. Agrupar dependencias del proyecto.

Como ya vimos es bastante fácil agregar nuevos componentes, pero depende de la memoria de alguien instalar los paquete requeridos, para poder definir todas los paquetes requeridos por nuestro proyecto hacemos uso del archivo bower.json.

Afortunadamente bower nos provee un comando que nos permite crear un archivo bower.json básico, a continuación un ejemplo de ejecución de comando interactivo $ bower init.

$ bower init
[?] name: MegaProject
[?] version: 0.1.0-alpha
[?] description: Not Available
[?] main file: assets/js/main.js, assets/css/main.css
[?] what types of modules does this package expose?
[?] keywords: HTML5
[?] authors: enzo - Eduardo Garcia <enzo@anexusit.com>
[?] license: MIT
[?] homepage: http://enzolutions.com
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being [?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No

Lo anterior generara un archivo llamado bower.json con el siguiente contenido.

{
  "name": "MegaProject",
  "version": "0.1.0-alpha",
  "authors": [
    "enzo - Eduardo Garcia <enzo@anexusit.com>"
  ],
  "description": "Not Available",
  "main": "assets/js/main.js, assets/css/main.css",
  "keywords": [
    "HTML5"
  ],
  "license": "MIT",
  "homepage": "http://enzolutions.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jQuery": "~2.1.1"
  }
}

Como se puede ver agregamos el paquete jQuery que ya estaba instalado, a partir de este punto podemos continuar agregando nuevos paquetes, veamos un ejemplo de otros paquetes adicionales con una version minima deseada.

"dependencies": {
    "bootstrap-sass": "~3.0.2",
    "jQuery": "~2.1.1",
    "requirejs": "~2.1.5",
    "requirejs-text": "~2.0.5",
    "underscore-amd": "~1.4.4",
    "backbone-amd": "~1.1.0",
    "modernizr": "~2.6.2",
    "backbone.marionette": "~1.0.2",
    "backbone.wreqr": "~0.2.0",
    "backbone.babysitter": "~0.0.6",
    "backbone.drupal": "~0.1.0-beta",
    "twig.js": "~0.7.1",
    "mocha": "~1.12.0",
    "chai": "~1.7.2",
    "sinon": "~1.7.3"
  },

Ahora bien que ventaja tenemos con este archivo bower.js, lo primero seria la portabilidad ya que solo debemos versionar este archivo en nuestros sistema de control de versiones. De esta forma cuando llegue un nuevo developer al equipo y este configurando su ambiente solo debe descargar el bower.json y en su ambiente ejecutar el siguiente comando:

$ bower install

En este caso bower detectara la existencia de un archivo bower.json y proceder a instalar los paquetes solicitados, permitiéndonos tener nuestros sistema de control de versiones mas limpio y así evitar tener almacenada 50 versiones de jQuery cuando al final la que nos interesa probablemente sea la ultima.

4. Especificar destino de paquetes.

Como ya vimos el destino predeterminado para los paquetes es el folder bower_components, pero es muy probable que esta ubicación no sea de nuestro agrado, si queremos especificar un distino personalizado esto lo haremos creando un archivo llamado .bowerrc como se muestra a continuación.

{
    "directory": "web/vendor"
}

Lo cual hará que los paquetes se guarden en el folder web/vendor o cualquiera que deseemos.

Espero que haya sido de su agrado.