Bower, instalación y configuración en Linux

Ya hace unos meses que fue la última vez que estuve experimentando con un proyecto web y que en su momento me obligó a tomar algunas notas, en este caso sobre Bower.

Bower es un manejador de paquetes que permite gestionar toda esta maraña de librerías, frameworks, utilidades, componentes, etc. y sus respectivas versiones (que evolucionan rápida e incompatiblemente a cada segundo) de forma organizada y estructura en nuestros proyectos.

Básicamente nos permite instalar y gestionar paquetes requeridos por nuestros proyectos web desde su repositorio online, y por supuesto mantener la consistencia de las versiones de los mencionados paquetes en todas nuestras instalaciones que tengamos del mismo proyecto. Si quieren saber más sobre Bower, y su uso en comparación al otro gran gestor de paquetes npm, les recomiendo leer los enlaces que están al final.

A continuación pasaremos directamente a la instalación de la herramienta en openSUSE Linux y su configuración inicial para un proyecto.
  1. Comenzamos por instalar git y npm, siendo este último uno de los manejadores de paquetes más importantes hoy en día, que se hizo popular con la llegada de Node.js.
    gabriel@testsrv:~> sudo zypper in git npm
    
  2. Con npm instalado, pasamos a instalar bower con la siguiente directiva:
    gabriel@testsrv:~> sudo npm install bower -g
    
    El parámetro -g permite que el paquete se instale a nivel general del sistema operativo y por ende con alcance para todos sus usuarios. Si no se incluye dicho parámetro, la herramienta solo quedará accesible para el usuario que la instale.

    Si queremos actualizar nuestra versión de Bower instalada podemos ejecutar la siguiente directiva, nuevamente utilizando el parámetro -g.
    gabriel@testsrv:~> sudo npm update bower -g
    
  3. Para comenzar a instalar paquetes mediante Bower, lo primero que debemos realizar es generar el archivo bower.json, que permite detallar información acerca de nuestro proyecto y más adelante gestionar las dependencias de los paquetes que vayamos instalando. En este ejemplo el archivo se va a crear en el directorio de objetos estáticos del proyecto (static/), ejecutando las siguientes directivas y respondiendo a sus consultas:
    gabriel@testsrv:~> cd static/
    gabriel@testsrv:~../static> bower init
    ? name mynewproject
    ? description Bower repo for MyNewProject.
    ? main file index.html
    ? keywords 
    ? authors gabrielkfr
    ? license MIT
    ? homepage 
    ? 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? Yes
    
    {
      name: 'mynewproject',
      authors: [
        'gabrielkfr'
      ],
      description: 'Bower repo for MyNewProject.',
      main: 'index.html',
      license: 'MIT',
      homepage: '',
      private: true,
      ignore: [
        '**/.*',
        'node_modules',
        'bower_components',
        'test',
        'tests'
      ]
    }
    
    ? Looks good? Yes
    gabriel@testsrv:~../static>
    
    Una vez finalizado con el interrogatorio y generado el archivo de configuración bower.json, lo abrimos y verificamos que la configuración sea similar a la sugerida inicialmente:
    {
      "name": "mynewproject",
      "authors": [
        "gabrielkfr"
      ],
      "description": "Bower repo for MyNewProject.",
      "main": "index.html",
      "license": "MIT",
      "homepage": "",
      "private": true,
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
      ]
    }
    
  4. A continuación ya podemos proceder a instalar un paquete como se muestra con el siguiente ejemplo:
    gabriel@testsrv:~../static> bower install clipboard --save
    
    Al no especificar el argumento -g en la directiva anterior, la instalación del paquete clipboard se realiza de forma local, o sea, con alcance limitado al entorno del usuario del sistema operativo que lo instaló.

    Por su parte el argumento --save lo que hace es agregar o registrar la dependencia (nombre y versión) en el archivo de configuración del proyecto bower.json, que si lo volvemos a revisar podremos observar que al final se agregó el atributo dependencies con el nuevo paquete:
    "dependencies": {
        "clipboard": "^1.5.16"
      }
    
    Donde el carácter ^ indica que se puede instalar cualquier versión igual o superior (preferentemente superior) a la versión 1.5.16. Si deseamos que una versión específica sea la que se instale en otros servidores de desarrollo o producción y no una mayor disponible, por ejemplo la versión "1.5.16", simplemente tenemos que quitarle el carácter ^ dejando la entrada de la siguiente manera:
    "dependencies": {
        "clipboard": "1.5.16"
      }
    
    Es importante también mencionar que todos los componentes que vayamos instando con la herramienta, como es el caso del paquete clipboard, serán ubicados dentro de la nueva carpeta contenedora denominada bower_components.
  5. Para desinstalar un paquete previamente instalado podemos ejecutar el siguiente comando:
    gabriel@testsrv:~../static> bower uninstall clipboard
    bower uninstall     clipboard
    gabriel@testsrv:~../static> 
    
  6. La lista de paquetes disponibles para su instalación mediante Bower es bastante extensa (jQuery, bootstrap, angular, normalizer-css, etc). Podemos buscar nuestros paquetes de preferencia en el buscador de su sitio web aquí, o bien ejecutando la siguiente directiva en la línea de comandos:
    gabriel@testsrv:~../static> bower search jquery
    Search results:
    
        jQuery https://github.com/jquery/jquery.git
        jquery https://github.com/jquery/jquery-dist.git
        jquery.x https://github.com/jljLabs/jquery.x.git
        ...
        ...
        jquery.bem https://github.com/zenwalker/jquery-bem.git
    gabriel@testsrv:~../static> 
    
  7. Por otro lado, podemos listar todos los paquetes que actualmente tenemos instalado ejecutando en el directorio donde se encuentra el archivo bower.json la siguiente directiva:
    gabriel@testsrv:~../static> bower list
    bower check-new     Checking for new versions of the project dependencies...
    mynewproject /home/gabriel/mynewproject/static
    └── clipboard#1.6.1
    gabriel@testsrv:~../static> 
    
  8. Si deseamos instalar nuestro proyecto en otro servidor simplemente necesitamos tener instalado Bower y el archivo de configuración bower.json, donde a partir de este último podremos instalar las dependencias de nuestro proyecto con sus correspondientes versiones de la siguiente manera:
    gabriel@testsrv:~../static> bower install
    bower clipboard#^1.5.16         cached https://github.com/zenorocha/clipboard.js.git#1.6.1
    bower clipboard#^1.5.16       validate 1.6.1 against https://github.com/zenorocha/clipboard.js.git#^1.5.16
    bower clipboard#^1.5.16        install clipboard#1.6.1
    
    gabriel@testsrv:~../static> 
    
Y hasta aquí llegó mi tiempo, será hasta la próxima entrada, dentro de.. ¿un año?

Fuentes:

Comentarios

Entradas populares