¡Buenos días!
Estoy escribiendo poco últimamente sobre programación. No me he olvidado del blog, es que gracias a Dios estoy teniendo menos tiempo. No está la cosa para echar cohetes acá en Spain pero voy a intentar apretar y no abandonar en las buenas costumbres, como por ejemplo, escribir en un blog 😉
Para instalar Bower tuve que navegar para encontrar dispersa alguna información, así que aquí les dejo todo junto en un post.
Qué es
Bower es una excelente herramienta para automatizar la gestión de tus librerías. Está creada para gestionar los fuentes de la parte front-end. Es decir, Bower nos descarga y actualiza las librerías de entorno cliente: CSS, HTML y Javascript que necesitemos. Puede ser por ejemplo las librerías de Bootstrap o jQuery.
Instalar
Necesitaremos tener instalado:
- Git
- npm
- nodejs
La web oficial es: http://bower.io/
Los comandos para instalar son los siguientes:
$ sudo apt-get update
$ sudo apt-get install git
$ sudo apt-get install npm
$ sudo apt-get install nodejs
$ sudo npm install -g bower
Llegados a éste punto si ejecutamos ‘bower update’ nos saldrá un error porque no encuentra ‘node’. Ésto pasa porque el ejecutable en Ubuntu no es node es nodejs y no lo encuentra. Así que creamos un enlace simbólico y asunto solucionado.
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
Ejecutar
Ya teniendolo instalado nos falta una configuración sencilla en dos ficheros. Primero un bower.json donde elegimos qué librerías necesitamos:
{
«name»: «Nombre del proyecto»,
«version»: «1.0.0»,
«dependencies»: {
«jquery»: «latest»,
«jquery-ui»: «latest»,
«bootstrap» : «latest»,
«font-awesome»: «latest»
}
}
Si ponemos en la versión de cada dependencia latest siempre nos descargará o actualizará a la última versión de la librería. Segundo para configurar en qué directorio queremos todo podemos crear un fichero .bowerrc
{
«directory»: «lib»,
«json»: «bower.json»,
«searchpath»: [
«https://bower.herokuapp.com»
]
}
Ahora todas las librerías las tendremos bajo el directorio /lib cuando ejecutemos lo siguiente:
$ bower update
Para terminar de incluir todas éstas librerías en un fichero HTML y usarlas podemos poner un HEAD parecido al siguiente:
<head>
<title>Título de la web</title>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»lib/bootstrap/dist/css/bootstrap.min.css» type=»text/css»>
<link rel=»stylesheet» href=»lib/font-awesome/css/font-awesome.min.css» type=»text/css»>
<script src=»lib/jquery/dist/jquery.min.js»></script>
<script src=»lib/jquery-ui/jquery-ui.min.js»></script>
<script src=»lib/bootstrap/dist/js/bootstrap.min.js»></script>
<script src=»main.js»></script>
<link rel=»stylesheet» href=»estilo.css» type=»text/css»>
</head>
Ya podemos empezar a maquetar y programar usando jQuery, jQuery-UI, Bootstrap y las Fuentes Asombrosas. No hemos tenido que ir web a web descargando todas las librerías una a una. Además si ahora ejecutas en cualquier momento ‘bower update’ se te actualizarán las librerías a la última versión.
Si has llegado hasta aquí espero que te estén sirviendo de ayuda.
Un saludo 🙂
