2011-11-07 13 views
14

Pregunta rápida para los carriles pros por ahí ...Rieles: Uso LiveReload con Asset Pipeline

Cuando se trabaja con aplicaciones Rails 3.0.x que era un gran consumidor de Guardia y LiveReload. Sin embargo, parece que cuando se utiliza la canalización de activos en Rails 3.1, el guardia de carga en vivo no sabe que los cambios en un archivo Sass deben desencadenar el envío de nuevas CSS al navegador.

Hay alguien usando LiveReload con el activo de la tubería? Si es así, ¿cómo lo haces funcionar?

Gracias!

Respuesta

21

Después de seguir algunos hilos de emisión en Github encontré la siguiente fijo mi problema:

1) Asegúrese de que todos los archivos SCSS se nombran después de la nueva convención de activos, así: filename.css.scss

que estaba usando SCSS antes de Rails 3.1 y acaba de nombrar todos mis archivos sass filename.scss.

2) Utilice la siguiente información para LiveReload en su guardfile:

guard 'livereload' do 
    watch(%r{app/helpers/.+\.rb}) 
    watch(%r{app/views/.+\.(erb|haml)}) 
    watch(%r{(public/).+\.(css|js|html)}) 
    watch(%r{app/assets/stylesheets/(.+\.css).*$}) { |m| "assets/#{m[1]}" } 
    watch(%r{app/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" } 
    watch(%r{lib/assets/stylesheets/(.+\.css).*$}) { |m| "assets/#{m[1]}" } 
    watch(%r{lib/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" } 
    watch(%r{vendor/assets/stylesheets/(.+\.css).*$}) { |m| "assets/#{m[1]}" } 
    watch(%r{vendor/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" } 
    watch(%r{config/locales/.+\.yml}) 
end 
+0

agradable, me había olvidado de la carpeta lib. ¿Te molestarías en lanzar el directorio de proveedores allí también? – stephenmurdoch

+1

Claro, se agregó el directorio de proveedores. – Andrew

+0

Asegúrate de tener la gema guard-livereload en tu GemFile. – FearMediocrity

6

he encontrado lo siguiente que funciona bastante bien también:

guard :livereload do 
    watch(%r{^app/.+\.(erb|haml|js|css|scss|sass|coffee|eco|png|gif|jpg)}) 
    watch(%r{^app/helpers/.+\.rb}) 
    watch(%r{^public/.+\.html}) 
    watch(%r{^config/locales/.+\.yml}) 
end 

Este no es el código predeterminado que se genera cuando ejecuta guard init livereload por alguna razón que no funciona tan bien con importaciones sass.

+1

Sí, si está utilizando SASS correctamente, no quiere que sus parciales compilados en CSS, por lo que no puede nombrarlos * .css.scss. –

+0

Publiqué esta pregunta relacionada para aclarar este punto: http://stackoverflow.com/questions/12334515/naming-imported-scss-files-scss-or-css-scss. Entonces, si tiene un archivo llamado _file.scss y se usa en @import "file" ;, entonces esta estrategia para livereload es la correcta y estos archivos no deben renombrarse a _file.css.scss. – justingordon

+0

¡Sí! Esto me ayudó más que cualquier otro ejemplo. Estoy usando la canalización de activos combinada con un sistema de inclusión SCSS. Tu ejemplo trabajó "fuera de la caja" para mí. – BradGreens

1

Como @mirko mencionado en su comentario, es obsoleto Css extra en archivos SCSS. Así que agregar eso no es una gran solución, y he experimentado que simplemente al agregar la extensión de scss se fuerza una recarga de página.

Entonces me encontré con que esto funciona:

watch(%r{(app|vendor)(/assets/\w+/(.+)\.(scss))}) { |m| "/assets/#{m[3]}.css" }` 

Mi opinión es esta mapea el archivo SCSS al archivo CSS compilado. Espero que también funcione para Sass.

Source: Github Issue

Cuestiones relacionadas