Gestionar paquetes o dependencias con Bower

Ya vimos que es Bower y como instalarlo. Ahora estamos en capacidad de gestionar nuestros paquetes (instalarlos, actualizarlos, removerlos) con dicha herramienta.

Importante: Los comandos a continuación deben ser ejecutados en la raíz del proyecto donde queremos instalar los paquetes.

Inicializar Bower

Debemos ejecutar el siguiente comando para crear el archivo de manifiesto llamado bower.json:

$ bower init

Al ejecutarlo nos irá solicitando la información que contendrá el archivo tal como se ve a continuación:

? name: my-project
? version: 1.0.0
? description: Proyecto de Bower
? main file: index.html
? what types of modules does this package expose?
? keywords: proyecto,bower
? authors: Eborio Linárez <contacto@todoprogramacion.com.ve>
? license: MIT
? homepage: http://todoprogramacion.com.ve
? 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 accidentally published to the registry? No<

{
  name: 'my-project',
  version: '1.0.0',
  authors: [
    'Eborio Linárez <contacto@todoprogramacion.com.ve>'
  ],
  description: 'Proyecto de Bower',
  main: 'index.html',
  keywords: [
    'proyecto',
    'bower'
  ],
  license: 'MIT',
  homepage: 'http://todoprogramacion.com.ve',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

Los parámetros de configuración solicitados poseen la siguiente funcionalidad:

  • name: Nombre del proyecto.
  • version: Un número de versión semántico. Puedes ver la especificación semántica en semver.org.
  • authors: Un arreglo con los autores del proyecto. Si tienes configurados tus datos de Git se agregaran automáticamente aunque puedes especificar unos diferentes.
  • description: Descripción corta del proyecto.
  • main: Archivos necesarios para utilizar el proyecto o paquete.
  • keywords: Una lista de palabras separadas por coma para ayudar a encontrar nuestro proyecto.
  • license: Contiene la licencia del proyecto.
  • homepage: El sitio web donde se desplegará o distribuirá el proyecto.

Luego, se generaran las siguientes preguntas:

  • set currently installed components as dependencies? (Y/N): Si ya tenemos componentes instalados puede agregarlos a la lista de dependencias.
  • add commonly ignored files to ignore list? (Y/N): Si contamos con archivos ignorados puede agregarlos a la lista de ignorados.
  • would you like to mark this package as private which prevents it from being accidentally published to the registry? (Y/N): Con esto podemos marcar el paquete como privado y evitar que pueda ser publicado en el registro de Bower e instalado por otras personas.

Luego de esto se mostrará la vista previa del archivo en la cual podremos indicar si nos gusta o no como quedará. En caso afirmativo se creará el archivo, en caso negativo no se ejecutará nada y podremos volver a empezar.

Puedes revisar la especificación del archivo bower.json en el repositorio oficial de Bower en GitHub.

Buscar paquetes con Bower

Tenemos dos mecanismos para buscar paquetes.

  1. Ir a la web de Bower en la sección de busquedas y escribir el nombre de algún paquete.
  2. Ejecutar el comando $ bower search <paquete>. Donde <paquete> es el nombre del paquete. Por ejemplo al buscar fontawesome veremos en la consola algo similar a lo que se muestra a continuación.
$ bower search fontawesome
Search results:
 
    fontawesome git://github.com/FortAwesome/Font-Awesome.git
    angular-fontawesome git://github.com/picardy/angular-fontawesome.git
    bootstrap3-fontawesome-timepicker git://github.com/locarise/bootstrap3-fontawesome-timepicker.git
    fontawesome-clean git://github.com/nbsp/bower-fontawesome-clean.git
    angoolar-fontawesome git://github.com/OlenDavis/angoolar-fontawesome.git
    fontawesome-icon git://github.com/andressanchez/fontawesome-icon.git
    polymer-fontawesome git://github.com/rtbenfield/polymer-fontawesome.git
    x-fontawesome git://github.com/ruiramos/x-fontawesome.git
    angular-fontawesome-index git://github.com/vperron/angular-fontawesome-index.git
    ng-grid-fontawesome git://github.com/tepez/ng-grid-fontawesome.git
    jquery.fontawesome-switch git://github.com/SUKOHI/jquery.fontawesome-switch.git
    angularjs-toaster-fontawesome git://github.com/cyclotron3k/angularjs-toaster-fontawesome.git
    gaia-fontawesome git://github.com/I-Value/gaia-fontawesome.git
    fontawesome-actions git://github.com/nyon/fontawesome-actions.git
    angular-ui-bootstrap-fontawesome git://github.com/maxfierke/ui-bootstrap-fontawesome.git
    showdown-fontawesome git://github.com/phodal/showdown-fontawesome.git

La lista mostrará las coincidencias con el término de búsqueda ingresado.

Instalar paquetes o dependencias con Bower

Una vez hemos encontrado el paquete que nos interesa simplemente debemos ejecutar el siguiente comando:

$ bower install <paquete>

Por ejemplo al instalar jQuery veríamos en la consola lo siguiente

$ bower install jquery
bower cached        git://github.com/jquery/jquery.git#2.1.3
bower validate      2.1.3 against git://github.com/jquery/jquery.git#*
bower install       jquery#2.1.3

jquery#2.1.3 bower_components\jquery

En caso que el paquete dependa de otros paquetes Bower los instalará automaticamente, por lo cual no debemos preocuparnos por otras dependencias que sean requeridas por el paquete a instalar.

Por defecto Bower instalará los paquetes dentro de un directorio llamado bower_components. Esta ubicación puede ser modificada creando en la raíz del proyecto un archvio llamado .bowerrc con el siguiente contenido:

{
   "directory": "path/to/packages"
}

NOTA IMPORTANTE: Si trabajas con Git no debes incluir los paquetes en tu control de versiones agregando tal directorio a tu archivo .gitignore.

Si ya existían paquetes instalados e indicamos en la inicialización de Bower que los agregara a la lista de dependencias, tendremos en el archivo bower.json un elemento llamado "dependecies" en donde debemos ir colocando cada uno de los paquetes instalados con su respectiva versión.

Si se nos hace complicado encontrar la versión correcta que debemos especificar en el elemento depencies, simplemente debemos agregar un parámetro --save al comando de instalación de la siguiente manera:

$ bower install <paquete> --save

De esta forma garantizamos que la lista de dependencias se llene de manera automática con la respectiva versión del paquete o dependencia instalada.

Actualizar paquetes o dependencias instaladas con Bower

Para actualizar los paquetes o dependencias simplemente deben ejecutar el comando

$ bower update

Eliminar paquetes o dependencias instaladas con Bower

Eliminar un paquete también es muy sencillo. Basta con ejecutar:

$ bower uninstall <paquete>

Si también deseamos eliminarlo de la lista de dependencia del bower.json ejecuta el comando de la siguiente manera:

$ bower uninstall <paquete> --save

TIP: El archivo bower.json si debes incluirlo en tu control de versiones para que los demás desarrolladores lo tengan en su ambiente de trabajo.

Eliminar paquetes o dependencias que no se encuentran en el archivo bower.json

Si eliminaste de la lista de dependencias algún paquetes y deseas eliminarlo por completo de tu proyecto, solo basta con ejecutar el siguiente comando:

$ bower prune

Al ejecutarlo limpiará (eliminará) todo paquete instalado que no se encuentre definido en el arcihvo bower.json.

Conclusión

Bower ofrece una serie de comandos muy útiles con los cuales podemos indicar una versión específica de un paquete, instalar directamente desde un repositorio Git, obtener información del paquete, etc. Te invito a profundizar cada uno de los comandos en la documentación de Bower.

Espero el artículo te sea de utilidad y lo compartas en tus redes sociales.

Comentarios

Deja tu comentario

http://