heroku - how - rails assets precompile

Uso de un tema jQuery UI con Rails 4: no se muestran imágenes

Question

Actualmente estoy usando Rails 4.0.2 con jQuery UI (principalmente para el datepicker). Mi entorno de producción es Heroku.

Mi principal problema es que las imágenes de mi tema no se están publicando (mientras funciona bien en el desarrollo). Estoy incluyendo el CSS del tema de esta manera en mi application.css :

 *= require_self
*= require_tree .
*= require jquery-ui-1.10.4.custom

El CSS del tema se muestra bien, pero ninguna de las imágenes funciona. He leído innumerables preguntas sobre StackOverflow, blogs y discusiones sobre Github, ninguna de las cuales me ha funcionado. También leí la guía de Edge Rails que no menciona una palabra acerca de la precompilación de imágenes, aunque a partir de las discusiones en Github parece que esto realmente cambió en Rails 4.

Aquí está mi estructura de directorio actual:

/vendor
/assets
/stylesheets
jquery-ui-1.10.4.custom.css
/images
animated-overlay.gif
ui-bg_flat_0_aaaaaa_40x100.png
(more images like these)

Hasta donde yo sé, la forma correcta de integrar css externas y librerías javascript es poner esos activos dentro de / vendor / assets, así que eso es lo que estoy haciendo.

Entonces, de nuevo, mi problema es que los rieles se niegan rotundamente a servir cualquier activo en producción. Puedo jugar con la URL de la imagen, pero simplemente no se está publicando.

Aquí hay cosas que he intentado:

Force Rails 4 para precompilar imágenes

Si ejecuto rake assets:precompile , solo veo 2 archivos dentro de public / assets, un archivo css y un archivo javascript. Supongo que esto está mal y que Rails también debería poner mis imágenes allí.

De acuerdo con esta pregunta: las imágenes de activos del proveedor de canal de activos de rieles 4 no se están precompilando ; debe indicar explícitamente a Rails que desea precompilar las imágenes. (Esto parece bastante loco para mí, ya que estoy bastante seguro de que no soy el único sitio de Rails 4 en Internet que sirve imágenes. ¿Todos los demás simplemente usan texto y arte ASCII?)

Así que agregué esto a mi application.rb :

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

Ahora cuando ejecuto rake assets:precompile todos los activos de mi proveedor se compilan, se toman las huellas dactilares y se publican en public/assets/images . Sin embargo, esto no tiene ningún efecto en la producción, sospecho que Rails simplemente se niega a servir los activos predeterminados y solo servirá los activos con huellas dactilares.

Incluya manualmente la ruta de las imágenes del proveedor

Algunas de las otras cosas que leí sugirieron que es necesario especificar manualmente la ruta de las imágenes si está fuera de la aplicación / activos (ya que la mía está en el proveedor / activos, esto parece calificar).

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

Cuando ahora ejecuto rake assets:precompile mis imágenes ya no se están precompilando ni tomando las huellas dactilares, pero tampoco se están sirviendo en producción.

De acuerdo con esta entrada del blog - JQuery-UI css e images, y Rails Asset Pipeline - esto se debe a que Sprockets verá que una ruta ya está incluida y la excluirá, y puede solucionarlo anteponiendo la ruta en application.rb .

initializer :after_append_asset_paths,
:group => :all,
:after => :append_assets_path do
config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "images").to_s
end

Esto tampoco tuvo efecto. Cuando ejecuto activos de rake: precompilación, no compila ni daña mis imágenes y no aparece en producción. Esa publicación está dirigida a Rails 3, así que realmente no tenía muchas esperanzas.

Mueva todas las imágenes a la aplicación / activos / imágenes

Aunque esto me parece incorrecto (en el sentido de Rails) moví todas las imágenes a la aplicación / activos / imágenes. Esto aún tuvo el mismo resultado: las imágenes no aparecen en la producción. También traté de combinar esto con el truco de forzar imágenes para ser incluidas en la compilación:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

Pero no tuvo ningún efecto. Sospecho que Rails simplemente está siendo obstinado y no está sirviendo los activos sin huellas digitales.

Otras cosas que he intentado

Las imágenes que se solicitan se hacen a través de css, por lo que si miro en el archivo css del tema real, hay líneas como esta:

background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;

Algunas cosas que leí (sobre todo en los comentarios / quejas en Github y publicaciones de blog) sugirieron que las /images al comienzo de la url me están jodiendo. Así que fui manualmente al archivo y lo eliminé en todas partes, lo que no tuvo ningún efecto, lo que significa que las imágenes aún no aparecían en producción.

Cosas que no quiero probar

De acuerdo con este post - Rails 4: Cómo solucionar el problema de Heroku Assets Not Found CSS Image - Debo agregar esto a mi production.rb

config.assets.compile = true

Realmente no quiero hacer eso ya que el inventario de activos lo hace de forma predeterminada y, según mi conocimiento (lo cual podría ser completamente incorrecto), sería realmente malo para el rendimiento. Por la misma razón, no quiero seguir adelante y agregar

config.serve_static_assets = false

a mi production.rb ya que no quiero que Rails sirva recursos estáticos en producción, quiero que Apache / nginx lo haga.

¿Cómo se supone que debes hacer esto en Rails 4? ¡Por favor ayuda!

Answer 1

Finalmente logré solucionar este problema. Hay 2 partes para la solución. Primero, debes decirle a Rails que precompile las imágenes. Por lo que puedo decir Rails (desde 4.0) ya no hará esto automáticamente para evitar que las gemas que incluyas tengan precompilados todos sus activos cuando realmente no lo desees.

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

Ahora sus imágenes deberían estar precompiladas (puede verificar esto running rake assets:precompile y mirando los resultados en público / activos ).

Ahora necesita cambiar el tema de la interfaz de usuario de JQuery para hacer referencia a las imágenes de huellas digitales en lugar de la URL de la imagen simple. Así que cambie la extensión de nombre de archivo del tema a .scss (en mi caso fue jquery-ui-1.10.4.custom.css.scss ) y busque y reemplace en su tema - cambiando la url a la url de image-url SASS helper. Entonces, como un ejemplo,

url(images/ui-bg_glass_65_ffffff_1x400.png)

se convierte

image-url(''images/ui-bg_glass_65_ffffff_1x400.png'')