Cuando trabajamos con compass es un poco engorroso editar, compilar y subir los CSS. Los usuarios más avanzados usamos la extensión para subir automáticamente los CSS al compilar. Pero aún con eso creo que los procesos se podrían mejorar, sobretodo si hay más de un desarrollador en el proyecto en el que estáis trabajando.

Al inicio nosotros tenemos un config.rb así:

# Carpetas dónde está ubicada cada cosa
http_path = "../"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
 
# Estilo de output para el CSS
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
 
# Activar las rutas relativas de los assets
# relative_assets = false
 
# Deshabilita los comentarios de debugging
line_comments = false

Pero a la vista está que es del todo insuficiente. Así que añadiremos la opción para que suba automáticamente los archivos CSS:

# Requiere los plugins de compass adicionales.
require 'net/ssh' 
require 'net/sftp'
require 'animation'
 
# Carpetas dónde está ubicada cada cosa
http_path = "../"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
 
# Estilo de output para el CSS
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
 
# Activar las rutas relativas de los assets
# relative_assets = false
 
# Deshabilita los comentarios de debugging
line_comments = false
 
# Ruta remota donde escribiremos los CSS. Debe existir, compass no la creará si no existe.
remote_dir_absolute = '/path/to/final/css/' # con / al final!
 
# Detalles de la conexión FTP/SFTP
sftp_host = 'codygo.es' # Can be an IP
sftp_user = 'fake_user' # SFTP Username
sftp_pass = 'fake_pass' # SFTP Password
sftp_port = 22          # SFTP Port (si es necesario, si es el 22 no se necesita)
 
# Callback que se ejecuta cuando un archivo sass es guardado
on_stylesheet_saved do |filename|
  $local_path_to_css_file = css_dir + '/' + File.basename(filename)
 
  # Sube los archivos
  Net::SFTP.start( sftp_host, sftp_user, :password => sftp_pass, :port => sftp_port ) do |sftp|
    puts sftp.upload! $local_path_to_css_file, remote_dir_absolute + File.basename(filename)
  puts "-._.-._.- Compass is making magical things :). Press Ctrl-C to Stop"
end

Ahora se nos suben los CSS al guardar un SASS pero es interesante, sobretodo si se trabaja con más gente, también guardar los SASS. Tendremos que añadir algunas líneas más:

# Requiere los plugins de compass adicionales.
require 'net/ssh' 
require 'net/sftp'
require 'animation'
 
# Carpetas dónde está ubicada cada cosa
http_path = "../"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
 
# Estilo de output para el CSS
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
 
# Activar las rutas relativas de los assets
# relative_assets = false
 
# Deshabilita los comentarios de debugging
line_comments = false
 
# Ruta remota donde escribiremos los CSS y los SASS. Debe existir, compass no la creará si no existe.
remote_dir_absolute = '/path/to/final/css/' # con / al final!
remote_dir_sass_absolute = '/path/to/final/sass/' # con / al final!
 
# Detalles de la conexión FTP/SFTP
sftp_host = 'codygo.es' # Can be an IP
sftp_user = 'fake_user' # SFTP Username
sftp_pass = 'fake_pass' # SFTP Password
sftp_port = 22          # SFTP Port (si es necesario, si es el 22 no se necesita)
 
# Callback que se ejecuta cuando un archivo sass es guardado
on_stylesheet_saved do |filename|
  $local_path_to_css_file = css_dir + '/' + File.basename(filename)
 
  # Sube los archivos
  Net::SFTP.start( sftp_host, sftp_user, :password => sftp_pass, :port => sftp_port ) do |sftp|
    puts sftp.upload! $local_path_to_css_file, remote_dir_absolute + File.basename(filename)
    puts sftp.upload! sass_dir, remote_dir_sass_absolute
    end
  puts "-._.-._.- Compass is making magical things :). Press Ctrl-C to Stop"
end

Muchas veces no es un proceso immediato y a veces tarda entre 1 o 2 segundos en subir. Queremos que nos avise (lo encuentro básico)!. Para ello tendremos que instalar compass-notify (os pedirá la contraseña ya que usamos sudo pero sino quizá no podría instalarlo):

$ sudo gem install -n/usr/local/bin compass-notify

Ahora añadimos al código las notificaciones:

# Requiere los plugins de compass adicionales.
require 'net/ssh' 
require 'net/sftp'
require 'animation'
require 'compass-notify'
 
# Carpetas dónde está ubicada cada cosa
http_path = "../"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
 
# Estilo de output para el CSS
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
 
# Activar las rutas relativas de los assets
# relative_assets = false
 
# Deshabilita los comentarios de debugging
line_comments = false
 
# Ruta remota donde escribiremos los CSS y los SASS. Debe existir, compass no la creará si no existe.
remote_dir_absolute = '/path/to/final/css/' # con / al final!
remote_dir_sass_absolute = '/path/to/final/sass/' # con / al final!
 
# Detalles de la conexión FTP/SFTP
sftp_host = 'codygo.es' # Can be an IP
sftp_user = 'fake_user' # SFTP Username
sftp_pass = 'fake_pass' # SFTP Password
sftp_port = 22          # SFTP Port (si es necesario, si es el 22 no se necesita)
 
# Callback que se ejecuta cuando un archivo sass es guardado
on_stylesheet_saved do |filename|
  $local_path_to_css_file = css_dir + '/' + File.basename(filename)
 
  # Sube los archivos
  Net::SFTP.start( sftp_host, sftp_user, :password => sftp_pass, :port => sftp_port ) do |sftp|
    puts sftp.upload! $local_path_to_css_file, remote_dir_absolute + File.basename(filename)
    puts sftp.upload! sass_dir, remote_dir_sass_absolute
 
	CompassNotify.notify('Upload complete!', File.basename(filename)+ ' has been uploaded.')
 
    end
  puts "-._.-._.- Compass is making magical things :). Press Ctrl-C to Stop"
end

¡Cuidado! Compass-notify por defecto muestra notificaciones cuando se guarda y no cuando se sube, ¡muy diferente! Para anular la notificación de guardado lo tenedremos que comentar manualmente en el archivo compass-notify.rb ubicado (en el caso de mac OS X) en:

/Library/Ruby/Gems/2.0.0/gems/compass-notify-0.0.2/lib/compass-notify.rb

Espero que os ayude a mejorar los procesos de producción.

Categorías: Compass
Si necesitas una url corta puede usar: codygo.es/1486

Deja un comentario