Gestiona tus proyectos web con "Bower"

Actualmente lo más recomendable es usar npm, yarn o webpack.

Bower es un gestor de paquetes para la web, esto quiere decir que nos permite instalar, actualizar o eliminar paquetes (frameworks, plugins, librerías, etc.) todo esto desde la Shell (Terminal), ya no tienes que ir en búsqueda de la última versión del proyecto en internet.

Instalación de bower

Antes de empezar, tenemos que tener ya instalado Node.js y Git.

El proceso de instalación es como cualquier instalación de npm (Gestor de paquetes JavaScript):

$ npm install -g bower

Si el comando de instalación no llega a funcionar, usa sudo antes de cada instrucción, en el caso de Windows tenemos que abrir la Shell (cmd) como administrador.

Instalación de paquetes

Una vez que ya tenemos Bower instalado, el siguiente paso es instalar el paquete que necesitemos dentro de nuestro proyecto.

$ bower install <paquete>

Siendo más específicos:

$ bower install bootstrap

Con esto creamos un nuevo directorio (bower_components), donde se van a descargar todos los paquetes que instalemos.

Por defecto el comando bower install instala la última versión del paquete, pero si queremos algo más especifico usamos:

$ bower install bootstrap#2.3.2

Un paquete puede ser un repositorio de GitHub, URL, y y más.

Búsqueda de paquetes

Para realizar la búsqueda de un paquete usamos el comando search, solo basta con poner algún nombre:

$ bower search jquery

El problema de las búsquedas es que nos puede salir una inmensa lista de resultados, lo cuál resulta muy incomodo.

Personalmente te recomiendo usar el buscador web de Bower, ya que las listas están mejor ordenadas.

Comandos Básicos

Bower cuenta con una serie de comandos que te pueden ayudar a administrar los paquetes que ya instalaste, aquí te mostraré algunos que son indispensables.

Lista de todos tus paquetes:

$ bower list 

Obtener información acerca de un paquete instalado:

$ bower info <paquete>

Actualizar paquete

$ bower update <paquete>

Eliminar un paquete

$ bower uninstall <paquete>

Ayuda acerca de los comandos:

$ bower help 

Ayuda acerca de un comando en específico:

$ bower help <command>

Guardando paquetes

Algo que realmente me encanta de Bower es que nosotros podemos guardar nuestros propios paquetes en un archivo bower.json. Gracias a esto cada vez que vallamos a empezar un proyecto, solo tendremos que ejecutar el comando bower install, para que así se instalen todos los paquetes de Bower.

Nota: Los paquetes deben de seguir las especificaciones de Bower.

Para guardar un paquete solo tenemos que ejecutar el comando:

$ bower init

Este comando nos guiará paso por paso todos los campos que necesitamos llenar.

Nota: No todos los campos son obligatorios, si no queremos rellenar nada, basta con poner enter.

$ bower init
	? name: Filis
	? version: 0.0.1
	? description: La la la la ...
	? main file:
	? what types of modules does this package expose?
	? keywords:
	? authors: Fili Martínez <[email protected]>
	? license: MIT
	? homepage:
	? set currently installed components as dependencies? No
	? add commonly ignored files to ignore list? Yes
	? would you like to mark this package as private which prevents it from being ac? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
	? Looks good? Yes

Después de pasar por está serie de pasos, se nos va a crear un archivo bower.json el cuál contendrá los valores que especificamos:

{
  "name": "Filis",
  "version": "0.0.1",
  "authors": [
    "Fili Martínez <[email protected]>"
  ],
  "description": "La la la la ...",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Manejando dependencias

Ahora imaginemos que necesitamos distintos paquetes, como bootstrap, Angular.js y Animate.css en nuestro paquete, pues solo tenemos que usar el comando:

$ bower install --save bootstrap angular jquery animateCSS

Con esto Bower automáticamente añadirá los paquetes.

{
  "name": "Filis",
  "version": "0.0.1",
  "authors": [
    "Fili Martínez <[email protected]>"
  ],
  "description": "La la la la ...",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.3.4",
    "angular": "~1.3.15",
    "jquery": "~2.1.4",
    "animateCSS": "~1.2.1"
  }
}

Cambiando la ruta de Bower

Bower por defecto instala los paquetes en bower_components, pero si no queremos que se use esa ruta, podemos cambiarla en el archivo .bowerrc (Si no existe, tenemos que crear el archivo en la raíz del proyecto).

{
  "directory": "paquetes/vendor"
}

Solo tenemos que ejecutar el comando bower install y los paquetes que tenemos en bower.json se guardaran en la ruta paquetes/vendor.