Bower.io: un gestor de paquetes para la web

Existen veces, cuando trabajamos para la web, se utilizan muchas librerias de terceros, por lo que tener que ir a las repositorios en Github o los sitios oficiales de esos proyectos nos toma un tiempo en reunirlas para comenzar a trabajar, Bower.io nos viene a resolver este inconveniente, ya que se encarga de administrar y descargar todas las librerias o paquetes y sus dependencias necesarias para nuestros desarrollos, así por ejemplo si necesitamos descargar la libreria Bootstrap, Bower.io lo descargara desde la cuenta de Github de Bootstrap junto con la dependencia JQuery.

¿Como instalar Bower.io?

Para tener instalado Bower.io en nuestro equipo de trabajo, es necesario contar con NodeJS así como tambien Git, por lo que se instala de la siguiente y sencilla forma usando NPM:

npm install -g bower

Le agregamos el parametro -g para que se instale de manera global en nuestro equipo.

¿Como usamos Bower.io?

Es simple, al igual que npm, Bower.io hace uso de git con el que descarga los paquetes necesarios, tan solo deberemos pasarles los siguientes argumentos, para instalar librerias:

bower install bootstrap

Podremos también listar los paquetes que se encuentran indexados por Bower.io:

bower search boostrap

Si queremos obtener información de una libreria o paquete ejecutaremos:

bower info jquery

¿Como se implementan las librerias descargadas por Bower.io?

En este caso, haremos lo siguiente, deberemos ubicarnos en nuestro directorio de trabajo por ejemplo ~/webapp y crearemos un directorio allí dentro al que llamaremos public/vendors:

cd ~/webapp
mkdir -p public/vendors

En ese directorio se encontraran todos los paquetes o librerias que descargamos, luego dentro de nuestro directorio ~/webapp crearemos un .bowerrc y dentro de este archivo colocaremos:

{
    "directory" : "public/vendors"
}

Descargaremos la libreria Bootstrap, el cual Bower.io lo almacenara en la ruta public/vendors de nuestro directorio de trabajo para posterior poder usarlo como cualquier libreria en nuestro documento HTML, y se hace de la siguiente manera:

<!-- CSS -->
<link href="public/vendors/bootstrap/dist/css/bootstrap.css" rel=stylesheet type="text/css">
<!-- JS -->
<script src="public/vendors/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="public/vendors/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>

Si lo desean pueden cambiar el nombre del directorio public/vendors por cualquiera de su conveniencia.  Así de sencillo es usar Bower.io nos ahorra muchas horas de recopilar todos los paquetes o librerias.