• Inspiración
  • Tutoriales
  • Talleres
    • Bootcamp de Desafio Latam, conviértete en desarrollador web
  • Oportunidades de trabajo

En1Mes

  • Talleres presenciales de rails
  • Bootcamp de programación

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

Ene 26, 2015Gonzalo Sánchez
Share Button
  • El Autor
  • Últimos Posts

About Gonzalo Sánchez

Emprendedor lean, Ingeniero civil informático dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas y por sobre todo fundador de en1mes.
  • Boorstin Honest disagreement is often a good sign of progress. - mayo 5, 2021
  • ¿Por qué Twitter fue hecho en Ruby on Rails? - abril 15, 2016
  • Construyendo una landing page en Ruby on Rails desde cero. - febrero 11, 2016
  • Pair programming (de a dos es mejor) - febrero 11, 2016
  • Creando un wordpress en hostinger - abril 18, 2015
  • Login con facebook en rails 4.1 y 4.2 - febrero 3, 2015
  • EL ASSET PATH DE RAILS - enero 26, 2015
  • Entendiendo los objetos en Ruby - enero 21, 2015
  • La verdadera educación Tecnologica - enero 14, 2015
  • Kit Digital del gobierno de Chile - enero 14, 2015
7 years ago Rubyruby, Ruby on Rails, Tutoriales7,634
Borrar un Scaffold en Ruby on RailsLogin con facebook en rails 4.1 y 4.2
You Might Also Like
 
¿Por qué Twitter fue hecho en Ruby on Rails?
 
Taller presencial de Ruby On Rails En Noviembre

Deja un comentario Cancelar respuesta

Últimos Tweets

Authentication failed! Please check your Twitter app data.
Tags
Ruby on Railsemprendimientos digitalesTutorialesDiseñoHerramientashtml5WordpressrubyLanding PageBases de datosTallereshackathonInspiraciónTipsNitrousHerokuPáginas WebphpCSSsmartphonesRailsGirlsEventosemprendimientos socialeslenguajes de programaciónJavascriptHostingEducaciónGemasprogramaciónCreatividadMySQLemprendimientosCitas inspiradorasExperimentosBenchmarksdiseño responsivoFrameworksInspector de ElementosTwitterlean startupredes socialestecnologíaHackatonUsabilidadmetodologías
Interesado en otros tipos de emprendimiento?

Quieres aprender a importar y exportar productos a todo el mundo? entra aquí

No te pierdas ningún artículo.

2016 © En 1 Mes