Integrando Bower y Rails, una unión poderosa

Cuando se presenta un problema o un nuevo proyecto, siempre es importante escoger la mejor herramienta para cada trabajo y si se trata de manejar assets, librerías, frameworks del lado del cliente, Bower se ha convertido en la herramienta de facto.

Me gusta desarrollar con Ruby on Rails y por eso considero importante integrar Bower en los proyectos Rails, a continuación detallo la forma en que lo he estado haciendo.

Antes de continuar, es importante notar que es requerido tener instalado node.js y bower

Como toda historia en el mundo de Ruby on Rails todo empieza con una gema, en este caso bower-rails. Primero, necesitamos incluirla en nuestro Gemfile:

1
gem "bower-rails", "~> 0.9.1"

Luego ejecutamos bundle para que se instale la dependencia y procedemos a inicializar la gema, escogiendo una de las dos formas siguientes:

Generando un bower.json

1
rails g bower_rails:initialize json

O generando un archivo Ruby DSL llamado Bowerfile

1
rails g bower_rails:initialize

En lo particular, prefiero la segunda opción, es más a la forma Ruby, este Bowerfile tendrá una estructura similar a esta:

1
2
3
asset "angular"
asset "d3"
asset "fontawesome", "4.2.0"

Por defecto esta gema pondrá los assets en la ruta ./vendor/assets/bower_components, también creará unas tareas que podremos usar con rake que básicamente encapsulan los comandos de bower:

1
2
rake bower:install
rake bower:update

Ahora necesitamos incluir en nuestro path de Rails en el archivo config/application.rb lo siguiente:

1
config.assets.paths << Rails.root.join("vendor","assets","bower_components")

Eso es todo de configuración, ya estamos listos para agregar nuestras dependencias a los archivos application.css o application.js según sea el caso. Lo hacemos de la siguiente forma:

1
//= require d3/src/d3

Ojalá este artículo sea de ayuda a alguien de la comunidad.

Hasta luego!

avatar

Blog neyDroid

Desarrollando Vagancias