EL ASSET PATH DE RAILS

Cuando uno está empezando a programar en Rails el asset path es la primera gran pesadilla, por no saberlo manejar bien uno puede demorar horas en simplemente cargar una imagen o un CSS, este tutorial te ayudará a lidiar con esos problemas de una vez por todas.

Partamos explicando que son los assets, los assets son todas las imágenes, sonidos, tipografías, películas, hojas de estilos y archivos javascript que que insertemos en nuestra página web.

Incorporando imágenes

En una página web normal podemos ingresar imágenes de ruta relativa (dentro de nuestro computador) simplemente usando el tag <img src=”imagen-prueba.png“> pero eso no lo podemos hacer en rails, bueno realmente podemos hacer algo como <img src=”assets/images/imagen-prueba.png”> siempre y cuando tengamos una imagen dentro de la carpeta /assets/images/ pero eso funcionará sólo en el entorno local y fallará en producción. La forma correcta de hacerlo es ocupando img_tag o asset_path, la segunda sirve para todos los tipos de assets así que voy a partir explicando esa.

Para utilizar asset_path, un método de rails, tenemos que utilizar el formato erb, o sea incorporar la zanahoria <%= %> dentro del tag img con el método y el llamado el archivo, o sea quedaría así:

<img src="<%= asset_path 'imagen-prueba.png' %>">

Hay que tener cuidado con un par de cosas, primero, la imagen si tiene que existir dentro de la carpeta /app/assets/images/, pero además debemos tener mucho cuidado con la sintaxis de asset_path, la zanahoria (<%=) debe estar pegada a la primera comilla y el cierre de la zanahoria debe estar pegada a la segunda, esto para evitar dejar espacios vacíos en el nombre del archivo.

Hay una forma mucho más fácil de hacer esto, pero no aplica a los otros assets, y es ocupando el helper image_tag, para incorporar la misma foto sería:

<%= image_tag 'imagen-prueba.png' %>

Obviamente que para que cualquiera de estas soluciones funcione tenemos que estar ocupando la extensión erb, o sea nuestro archivo debe ser .html.erb (por defecto en ruby)

Incorporando CSS

Los archivos CSS son fáciles de incorporar, simplemente debes colocarlo dentro de la carpeta apps/assets/stylesheets, todos los archivos de ahí se cargaran en cada página gracias a que dentro de nuestro layout tenemos por defecto la siguiente línea.

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

Pero esa línea lo que hace no es cargar absolutamente todos los css, sólo carga el archivo app/assets/stylesheets/application.css el cuál además de un par de comentarios contiene:

*
*= require_tree .
*= require_self
*/

require_tree es la línea responsable de cargar recursivamente (directorios y subdirectorios) todos los css dentro de esta carpeta, mientras que require_self carga el css contenido dentro del archivo, si cambias el orden primero se carga el css dentro de application y luego los otros archivos. Por otro lado si fuera necesario establecer un orden de carga este se puede especificar en este mismo archivo a través de la instrucción require y nombrando los css, por ejemplo:

/* …
*= require reset
*= require layout
*= require chrome
*= require_tree .
*/

este cargaría primero el archivo reset, luego layout y luego chrome y luego el resto, si hubiese css dentro de este archivo se ignoraría puesto que no se incluye require_self.

Incorporando javascript

Con respecto a este punto no me voy a extender puesto que funciona exactamente igual que los css, la diferencia es que la línea que los carga dentro del layout es:

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

el archivo cargado es app/assets/javascript/application.js y funciona de la misma forma que application.css

Incorporando imágenes (u otros assets) dentro del CSS y del JS

Los assets incorporados dentro de los archivos css están sujetos a las mismas condiciones que los que ya hemos visto, pero para poder ocupar el método asset_path dentro de estos necesitamos que estos archivos además contengan la extensión .erb.

O sea por ejemplo si tenemos un archivo style.css el cual pone una imagen como background de fondo, entonces debemos nombrarlo style.css.erb y luego dentro de la url(fondo1.png) cambiarlo por

url(<%= asset_path fondo1.png %>)

es muy importante que nos fijemos bien en la sintaxis de nuestro archivo css, si bien CSS es tolerante a fallos debido al principio de graceful degradation la precompilación de archivos CSS no es tan tolerante y un punto y coma sobrante causara problemas a la hora de enviar nuestro proyecto a producción.

Incorporando tipografías locales

Para incorporar tipografías todavía nos falta aprender una cosa más, a manipular que archivos y que carpetas son parte del asset_path, para esto vamos a modificar el archivo /config/application.rb y dentro de la clase vamos a agregar esto.

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

para Rails 4.2 (y en adelante) se creó un nuevo archivo para manejar los assets en /config/initializers/assets.rb, si estas trabajando en ese archivo agrega los assets al proceso de precompilación ahí siguiendo la nomenclatura comentada del archivo.

Finalmente cuando se modifica el archivo application.rb o un initializers hay que reiniciar el servidor, y con eso ya deberíamos tener acceso a nuestras tipografías.

La carpeta vendor/assets

Algunos sistemas como bower ocupan por defecto una carpeta dentro vendor que no viene agregada al asset pipeline por defecto, debes agregar todas las carpetas que vas a ocupar de la misma forma que agregamos las fonts en el paso anterior.

config.assets.paths << Rails.root.join('vendor', 'assets')

También para hacer más fácil las referencias puedes agregar subcarpetas

config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets')
config.assets.paths << Rails.root.join('vendor', 'assets', 'javascript')

Probando la precompilación de assets

para probar que los assets se precompilen correctamente, podemos utilizar la siguiente línea en bash.

RAILS_ENV=Production rake assets:precompile

¿Enviar o no los assets a producción?

En mi experiencia una cosa que siempre causa caos, es agregar los assets a git, no lo hagas, si en algún momento precompilaste para probar que todo esté bajo control acuérdate de limpiar con

rake assets:clean

RAILS_ENV=Production rake assets:clean

y si por algún motivo llega a quedar algún archivo dentro de public/assets bórralos.

¿Tus assets no funcionan en Heroku?

Si tus assets no funcionan en Heroku lo que debes hacer es agregar la gema rails_12factor al gemfile.

#happyCoding