Bower es una herramienta que nos permite encontrar proyectos y herramientas de javascript y administrarlas dentro de nuestro proyectos, dicho de forma fácil nos permite descargar y actualizar de forma sencillas paquetes como Jquery, Bootstrap, etc. ..
En el contexto de Rails, funciona igual que el gemfile, pero antes de ocuparlo primero necesitamos instalarlo.
Paso 0: Instalando Bower y Bower-Rails
Para instalar Bower requerimos de Node y npm que podemos instalarlas desde aquí http://nodejs.org/
una vez instalado nodejs y npm abrimos la terminal y corremos el comando: (el signo bash junto al mayor no se copian, se utilizan para denotar que estamos en ambiente bash)
$> npm install -g bower
Una vez instalado bower, agregamos la gema bower-rails al gemfile.
gem 'bower-rails'
y luego corremos en la terminal la línea:
$> bundle install
Paso 1: Utilizando bower
Aquí vamos a hacer varias cosas, así que voy a dejar un sencillo listado para guiar el proceso.
- Agregar los paquetes que se necesitan al Bowerfile
- Instalar los paquetes a través de rake bower:install
- Agregar los assets nuevos al config de rails, para que pueda ubicarlos y usarlos
- Si hay archivos con formatos raros, como por ejemplo las fuentes agregarlos al proceso de precompilación
- Cambiar el application.css por application.css.scss para poder ocupar sass (dependiendo del caso puede no ser necesario)
- Importar (o requerir) los assets desde el application.css o del application.js según corresponda
Paso 2: Ejemplo con Bootstrap
Hay varias formas de partir con Bower, pero andar creando archivos de configuración con json y modificandolos manualmente me parece innecesario antes otras formas más sencillas.
Para empezar vamos a crear un Archivo Bowerfile (la primera letra mayúscula), la misma idea que el Gemfile de rails, dentro del archivo pondremos los paquetes de javascript que queremos, en este caso para las pruebas ocuparemos Bootstrap.
asset 'bootstrap-sass-official'
y luego para instalar boostrap corremos la siguiente línea en el terminal:
$> rake bower:install
Posteriormente podemos actualizar todos los paquetes ocupando :
$> rake bower:update
Con la instalación nuestros archivos quedarán dentro de la carpeta vendor/assets, lo que necesitamos ahora es decirle al config de rails que agregue estas carpetas al asset_path, para eso abrimos el archivo config/application.rb y copiamos dentro de la clase
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","stylesheets")
Ademas en el caso de bootstrap correspondería agregar ahí mismo la carpeta de las fuentes.
config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")
y añadir dentro del mismo archivo justo debajo los archivos de las fuentes al proceso de precompilación
config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$) config.assets.precompile += %w( bootstrap/glyphicons-halflings-regular.woff2 )
Después de cambiar este archivo es necesario reiniciar el server si se está corriendo.
El último paso consiste en importar el css de bootstrap, para eso primero vamos a renombrar el archivo a .css.scss para poder ocupar sass y luego al final del archivo fuera de la sección de comentarios agregaremos
@import "bootstrap-sprockets"; @import "bootstrap";
Ya con eso estaríamos listos.
Comentarios finales
En el caso de bootstrap con las gemas y CDNs disponibles no es necesario ocupar bower, pero es un buen ejemplo con las suficientes complicaciones para manejarlo.
Además dentro de otros beneficios Bower (al igual que el gemfile) nos permite especificar las versiones de los paquetes de javascript, y a diferencia del gemfile utiliza la versión original del proyecto, por ejemplo el número de la versiones de las gemas de jquery o de bootstrap no corresponde a las versiones de los proyectos y no siempre están actualizadas, eso hace inncesariamente complicada la vida de los programadores y nosotros no vinimos a complicarnos la vida.
Fuente: https://medium.com/tecnologia-digital/que-es-bower-y-para-que-sirve-en-rails-438cde7282f0
