Tuto Drupal - Theming Omega4 : Installation Stack Ruby sur Windows

image
Sass est écrit en Ruby et non en PHP. Il n’est pas nécessaire de connaître Ruby pour utiliser Sass, mais il faut quand même l’installer sur sa machine de développement.

Sass est écrit en Ruby et non en PHP. Il n’est pas nécessaire de connaître Ruby pour utiliser Sass, mais il faut quand même l’installer sur sa machine de développement.

C’est un peu long la première fois mais après ça marche tout seul.

Note : Windows n’est pas le meilleur environnement pour Ruby, Sass, Git etc. C’est beaucoup plus facile sous Unix (MacOS ou Linux), mais avec ce tutoriel ça devrait marcher...

Workflow :

Il n’est pas nécessaire que Ruby soit installé sur le serveur de développement / test / production. En réalité voilà comment cela se passe :
1. Sur sa propre machine en local, on modifie les fichiers .scss (Sass). Omega fournit une commande drush (drush omega-guard) qui va en permanence “écouter” les modifications des fichiers du thème et compiler les .scss en .css.
2. On upload les fichiers sur le serveur. Mais Drupal n’utilise que la version CSS.

Pré-requis

Pour que tout fonctionne correctement, il est nécessaire d’avoir plusieurs programmes installés sur sa machine :
- Un serveur LAMP (WAMP, ou XAMPP), mais je ne vais pas décrire cela ici.
- Drush (j’utilise Drush for windows qui marche très bien)
- Git (là aussi j’utilise la version windows), surtout utile parce qu’il fournit un meilleur “shell” que celui de windows.
- Bien vérifier que Drush puisse décompresser les fichiers zip en ligne de commande (https://drupal.org/node/1734508)

Pour chaque installation il faut bien vérifier que les options de type “add command to PATH” soient activées pour faire en sorte que les commandes drush et git soient accessibles de n’importe quel répertoire de l’ordinateur.

Ruby

Installation de Ruby

Il existe plusieurs versions de Ruby, nous en sommes actuellement à la 2.1 mais après plusieurs tests, il vaut mieux utiliser la 1.9.3 qui marche très bien avec Omega et qui évite des incompatibilités par la suite.

Il y a un install très simple pour windows : http://rubyinstaller.org/downloads/
Il faut choisir la version 1.9.3 pour sa machine et installer. Bien vérifier que l’installation ajoute Ruby dans le Path système de windows.

Lorsque tout est fini, si on ouvre un terminal et qu’on tape la commande :

ruby -v

Cela doit afficher la version en cours de Ruby.

Installation du devkit

Il se trouve aussi sur la page : http://rubyinstaller.org/downloads/

Il faut bien prendre celui qui correspond à la version 1.9.3 et le décompresser dans un répertoire. Personnellement je l’ai mis dans c:/rubydevkit. Il ne faut pas supprimer ce répertoire après l’installation.

Il y a une documentation complète ici mais plus simplement :
1. Ouvrir un terminal et se déplacer dans le répertoire d’installation
2. ruby dk.rb init
3. normalement il doit détecter la version de Ruby installé et modifier le fichier config.yml (dans le répertoire) en ajoutant automatiquement le chemin de l’installation de Ruby. S’il n’y arrive pas, il faut éditer le fichier config.yml et le rajouter manuellement.
4. ruby dk.rb install
5. et c’est tout (penser à fermer et ré-ouvrir le terminal pour que ça prenne effet) !

Il est nécessaire d’installer le devkit car il permet de compiler certaines librairies Ruby sous windows. Si on ne l’installe pas, on risque d’avoir des erreurs plus tard.

Omega 4

Je vais prendre l’exemple d’un D7 “classique”. On peut installer Omega à la main, mais il vaut mieux utiliser drush. Il faut utiliser le terminal drush qui a été installé, et l’ouvrir dans le son répertoire drupal.

drush dl omega -y
drush en omega -y

Création d’un sous-thème

Il ne faut jamais modifier directement Omega mais plutôt créer un sous-thème. Il y a une commande drush très simple pour faire cela :

drush omega-wizard

Il faut se laisser guider et donner un nom à son thème et choisir l’emplacement de ce dernier. Il va dupliquer les fichiers, installer les librairies additionnelles (Modernizr, Htmlshiv, etc.). C’est à ce moment qu’il peut y avoir des erreurs / warning s’il ne trouve pas unzip en ligne de commande pour décompresser les fichiers zip.

Voilà maintenant les choses sérieuses peuvent commencer !

Sass / Compass

Toujours avec le terminal drush, se déplacer dans le répertoire du sous-thème omega, exemple:

sites/all/themes/montheme

Quelques petites explications :

Sass et compass sont des librairies Ruby, on appelle cela des gems. Omega nécessite l’installation de plusieurs gems en plus de Sass et Compass pour fonctionner. La liste est longue, mais elles permettent de compresser les css, de vérifier les changements dans un répertoire etc.

Ruby a une gem “bundle” qui est un gestionnaire de dépendances. A la racine du sous-thème Omega vous trouverez un fichier Gemfile. Si vous l’éditez, vous verrez la liste des gem nécessaires pour le projet. Avec la commande bundle, toutes les gems nécessaires seront automatiquement installées dans leur bonne version. Cela permet d’avoir plusieurs projets sur une même machine et de pouvoir passer de l’un en l’autre en évitant les incompatibilités.

Si vous trouvez cela génial (et vous devez (-;). Il commence à avoir la même chose pour PHP, cela s’appelle Composer et la bonne nouvelle c’est que Drupal8 va l’utiliser.

Installation de la gem bundle
gem install bundle
Bundle !

à la racine du sous-thème :
bundle install

(si jamais le Gemfile est modifié, il y a la commande bundle update qui installe juste les changements).
Voilà l’installation est terminée, il n’y a plus qu’à travailler !

Omega Guard

Guard est une gem Ruby dont le rôle est de vérifier en permanence les changements dans un répertoire et d’exécuter en temps réel des commandes à chaque modification. C’est cela qui va servir à compiler les fichiers scss en css !

Guard est déjà configuré avec Omega et il y a une commande drush qui fait tout ce qu’il faut.

Je vous conseille d’ouvrir 2 terminaux drush. Un qui va servir pour guard (si vous le fermez guard s’arrête) et un autre pour pouvoir utiliser drush pour vider le cache etc.

Donc dans un terminal drush à la racine du sous-thème :

drush omega-guard
(si vous voulez l’arrêter : crtl-c)

A partir de ce moment dès que vous modifiez un fichier scss (et enregistrez), vous allez voir dans le terminal que Guard s’active et compile en css. Il peut aussi vous indiquer des erreurs dans vos fichiers avec la bonne ligne etc. C’est pratique.

Livereload

C’est une extension bien pratique pour Chrome ou Firefox qui permet de rafraîchir automatiquement le navigateur à chaque changement dans un scss.
Omega-guard l’utilise. Il marche bien chez moi avec Chrome.

Un exemple

Alors pour vérifier que tout marche bien, éditez le fichier montheme.styles.scss dans le répertoire site/all/themes/montheme/sass
Rajoutez :

$grids: 12;
$gutters: 1/4;
body {
@include background-grid($color: red);
}

à la fin du fichier et enjoy ! Amusez-vous à jouer avec les valeurs de grids et gutters.

Quelques liens utiles

Les sites de Sass et Compass sont des incontournables.

Omega permet d’utiliser plusieurs systèmes de grilles comme susy ou singularity.gs (par défaut). La documentation de singularity est ici.

Il y a une très bonne série de vidéos sur Omega sur youtube. Je m’en suis beaucoup servi pour cette fiche technique.

On est pas obligé de se servir de Sass / compass / guard avec Drupal uniquement, si le sujet vous intéresse : Guard is your best friend !

Ludovic Coullet
Twitter : @lcoullet