Le retour de Ruby : Haml

24
Jul/090

Le retour de Ruby : Haml

On ne change pas les bonnes habitudes, et une des premières chose qui me manque sur ce projet est l’utilisation des outils tels que Haml et Sass¹.

Heureusement, il est très simple de les rajouter !

Installation

L’installation se fait simplement grâce au système de gem de Ruby :

sudo gem install haml

Préparation

La suite sera de réorganiser les fichiers afin d’obtenir une production de fichiers cibles de façon dynamique :

les fichiers cibles resteront à leur emplacement actuel
les fichiers sources seront stockés dans le répertoire priv/templates.

L’organisation des fichiers est donc modifiée de cette façon :

priv/
  templates/
    views/
    styles/

Les vues auront l’extension .haml et les feuilles de styles l’extension .sass.

Migration

La feuille de style est réécrite selon le format Sass, par exemple :

.box
  :background-color #F0F0F0
  :border 1px solid #AAA
  :-moz-border-radius = !default_radius
  h2
    :color #369
    :background-color #E5E5E5
    :border-bottom 1px dotted #888
    :padding 3px 0px 3px 10px
    :-moz-border-radius-topright = !default_radius
    :-moz-border-radius-topleft = !default_radius

On a donc accès à toutes les subtilités de Sass.

Idem pour le fichier HTML index.html :

!!!
%html
  %head
    %title Ecrcm
    %link( rel="stylesheet" href="/assets/styles/application.css" )
  %body
    #templates
      .box
        %h2.title
        .content
        .actions
    #main
    %script( type="text/javascript" src="/assets/scripts/jquery-1.3.2.js" )
    %script( type="text/javascript" src="/assets/scripts/pure-2.08.js" )

Je trouve que cela se passe de commentaires.

Processus de génération

On doit d’abord référencer l’utilisation des nouveaux composants dans le Rakfile.rb :

require "haml"
require "sass"

Les fichiers doivent donc être transformés par le moteur HAML, ou SASS lors de la phase de build.

En gros, on parcourt les fichiers dans le répertoire priv/templates et on recopie chaque élément dans le répertoire www/assets après transformation :

sass = FileList["#{ROOT}/priv/templates/**/*.sass"].map do |src|
  src.gsub("/templates/", "/www/assets/").gsub(".sass", ".css").tap do |target|
    file target => src do
      puts "Creating style #{target}"
      final = Sass::Engine.new(File.read(src)).render
      File.new(target, "w+").puts(final).close
     end
  end
end

On rajoute cette tâche comme préquis du build et les commandes sont inchangées.

task :build => [ :compile, haml, sass, :edoc, :test ]

On réitère à peu près la même opération pour les fichiers Haml. La seule différence dans le processus de build est que l’on indique le format de sortie, en l’occurrence HTML 5 :

Haml::Engine.new(File.read(src), :format => :html5)

Sources

Les sources sont disponibles à l’adresse : http://github.com/rv/ercm/tree/blog02

Conclusion

Ruby est exploité ici pour son rôle de « colle » entre applicatifs, pour lequel il excelle… et qui serait bien trop compliqué à redévelopper en Erlang.