17 noviembre, 2019

Primeros pasos con Bower (1 de 2)

¿Qué es?

Logo de http://bower.io/
Logo de http://bower.io/

En este tutorial, vamos a aprender a utilizar la herramienta Bower en nuestro proyecto web. Bower es un módulo de Node.Js que sirve para manejar dependencias, optimizado para su uso en front-end.

Esto quiere decir que, con Bower, te vas a olvidar de tener que ir a cada página de cada plugin externo que quieras incluir en tu web, descargarlo, copiarlo en el directorio de tu proyecto e incluirlo en el documento HTML, como hicimos anteriormente con Slick.

Con Bower, sólo tendrás que pedirle que instale el plugin y él se encargará de descargarlo en el directorio de tu proyecto, y, al tener todos los plugins organizados, te será más fácil controlar qué tienes y, con un solo comando, podrás actualizar todos a su última versión. Además, el propio Bower se encarga de manejar las dependencias de todos tus plugins.

Para seguir este tutorial, es recomendable tener conocimientos mínimos de HTML y CSS.

La página oficial de Bower se encuentra en:

http://bower.io/

¿Cómo lo instalo?

Bower se instala como cualquier módulo de Node.js, y esto es válido para cualquier sistema operativo: mediante línea de comandos usando npm. Así que, lo primero que necesitamos, es instalar Node.js, tal y como explico en esta entrada, tras lo cual podremos ejecutar node y npm desde línea de comandos. Pero, ¿qué es npm? Pues npm (Node Package Manager) es una herramienta que se encarga de gestionar paquetes (o módulos), tanto de instalarlos como de actualizarlos, borrarlos o gestionar dependencias.

La versión actual de Node.js es la 0.12.0 (que es con la que vamos a trabajar) y la de npm es la 2.5.1. Puedes comprobar las versiones que tienes instaladas ejecutando:

node -v
npm -v

Además, para que pueda descargar plugins, Bower requiere Git, que puedes instalar siguiendo estos pasos.

Existen dos maneras de instalar Bower: la primera, a nivel global en tu sistema, y la segunda, a nivel local sólo en tu proyecto. Vamos a ver las dos y  a valorar después cuál te puede convenir más.

Instalar Bower a nivel global

npm install -g bower

Donde -g indica que la instalación la estás haciendo a nivel global. Este proceso puede tardar unos minutos, ya que tiene que descargar e instalar el paquete.

En este caso, el comando bower te funcionará en el terminal, estés en el directorio que estés, y tu proyecto no guardará nada relacionado con el módulo de bower, sólo los plugins y archivos de configuración.

Instalar Bower a nivel local

Lo primero, debes acceder al directorio de tu proyecto (o crear uno nuevo) desde la consola de comandos, para allí ejecutar:

npm init

Puedes darle a «Enter» hasta que acabe para dejar las opciones por defecto. Esto te iniciará el proyecto y te creará el siguiente archivo:

package.json: Fichero de configuración de npm, con la información del proyecto y módulos descargados. No te preocupes mucho por esto para este tutorial.

npm install --save-dev bower

En este caso, el comando bower te funcionará en el terminal tan sólo bajo el directorio donde lo has instalado y se creará en tu proyecto lo siguiente:

node_modules/: Directorio donde se almacenan los módulos instalados mediante npm. Tras la instalación, contendrá el módulo bower. Con saber que esto existe, te vale para seguir este tutorial.

¿Global o local?

Tanto la instalación haya sido local como global, puedes comprobar que es correcta ejecutando:

bower -v

Lo que nos dará la versión de Bower instalada, en mi caso, la 1.3.12.

La instalación global te permite instalar una única vez el módulo en todo tu sistema para usarlo en cualquier proyecto, mientras que la local sólo vale para el proyecto en el que lo instalas, pero te da mayor control de qué módulos estás usando y qué versiones. Yo uso la versión local, porque me gusta tener el control total de lo que hago, pero las dos opciones dan exactamente la misma funcionalidad.

En la siguiente entrada, veremos cómo crear nuestro primero proyecto Bower.

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies