Compiler Sass avec un fichier Guard

Cet article commence à vieillir. Il y a des solutions plus faciles à mettre en place et mieux maintenues, je pense par exemple aux tasks runners à Gulp ou Grunt.

J’aime gagner du temps dans mon workflow, comme je le fais avec git en utilisant git-flow. J’ai donc chercher un moyen d’automatiser la compilation de Sass dans mes projets, et je suis tombé sur cette vidéo de Jeffrey Way, Guard is your best friend.

En gros, on crée un fichier (Guardfile) à la racine de notre projet, qui contient différents paramètres, comme par exemple: le dossier contenant les fichiers Sass, le dossier où les fichiers CSS sont générés, et aussi quel type de compilation ( compressed, nested, …).

Il devient alors très facile de compiler les fichiers en exécutant une seule commande. L’avantage est d’avoir notre configuration dans un fichier Guard. Mais ce n’est pas tout, Guard a une multitude de plugins, comme live reload et autres.

Installer Guard et son plugin Sass

La première fois, il va falloir installer Ruby et Ruby Gems sur votre système, s’ils ne le sont pas déjà. Quand c’est fait, on installe Guard :

$ gem install guard
6 gems installed

Et ensuite, le plugin Sass :

$ gem install guard-sass
1 gem installed

Créer le fichier Guard, et automatiser la compilation

Maintenant que Guard, et le plugin Sass sont installés, on crée le Guardfile :

$ guard init
21:18:07 - INFO - Writing new Guardfile to c:/wamp/www/jeromesmadja/Guardfile
21:18:08 - INFO - sass guard added to Guardfile, feel free to edit it

Guardfile est alors créé dans le dossier actuel, et son contenu devrait ressembler à ça :

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'sass', :input => 'sass', :output => 'css'

Deux options par défaut : - :input où les fichiers Sass sont localisés dans le project - :output où Guard compilera les fichiers css

Le plugin contient une multitude d’autres options. Par exemple pour minifier les fichiers css, il suffit d’ajouter : :style => :compressed.

Une fois que les paramètres sont corrects, il ne nous reste plus qu’une seule chose à faire, dire à Guard de regarder nos fichiers. Et pour ça il suffit de lancer :

$ guard
21:19:04 - INFO - Guard uses TerminalTitle to send notifications.
21:19:04 - INFO - Guard is now watching at 'c:/wamp/www/jeromesmadja'
[1] guard(main)>

Oui, c’est tout ! Guard commencera alors à regarder les fichiers Sass qui sont dans le dossier que l’on a défini, et les compilera dans le dossier output. Aussi simple que ça.

Gagner encore plus de temps avec live reload

Pour faire une présentation rapide de live reload, si vous ne connaissez pas, c’est une extension de navigateur qui permet à la touche f5 de votre de clavier se reposer, et de ne pas se faire taper dessus toutes les 5 secondes. A chaque fois qu’une sauvegarde dans un fichier a lieu, live reload rafraîchira la page automatiquement.

Il faut juste s’assurer que vous avez l’extension live reload installé dans votre navigateur préféré. Si vous ne l’avez pas encore vous pouvez la trouver ici.

Pour installer le plugin live reload pour Guard :

$ gem install guard-livereload
5 gems installed

Pour l’ajouter au Guardfile :

$ guard init livereload
22:02:15 - INFO - livereload guard added to Guardfile, feel free to edit it

Et le Guardfile devrait maintenant contenir les paramètres pour live reload :

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'sass', :input => 'css/scss', :output => 'css'

guard 'livereload' do
  watch(%r{app/views/.+\.(erb|haml|slim)$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{public/.+\.(css|js|html)})
  watch(%r{config/locales/.+\.yml})
  # Rails Assets Pipeline
  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html))).*}) { |m| "/assets/#{m[3]}" }
end

Je ne connais pas Ruby, mais il faut juste modifier les expressions régulières pour lui dire les extensions de fichiers à regarder. Donc quelque chose comme ceci sera plus utile dans notre cas :

guard 'livereload' do
  watch(%r{.+\.(html|css|js|)})
end

A chaque fois qu’un fichier avec l’extension .html, .css, ou .js sera mis à jour, le navigateur rechargera la page. On peut donc voir les changements apparaître directement dans le navigateur quand le fichier CSS a été compilé.

La première installation peut prendre un peu de temps, particulièrement s’il faut que vous installiez Ruby et Ruby Gems, mais je pense que ça vaut vraiment le coup. Une fois que c’est installé, il est très facile de créer un nouveau Guardfile pour vos nouveaux projets. Par exemple si votre structure est la même pour tous vos projets, vous avez juste à copier votre Guardfile à la racine de votre nouveau projet, et lancer la commande guard, et BAM.

Guard peut donc se révéler un très bon outil pour gagner du temps, peut-être juste quelques minutes par jour, voire quelques heures par mois. Si l’installation est douloureuse, contactez moi, je serais très content de vous aider. Guard ne se limite pas à Sass et live reload, si vous êtes intéressé, voici la liste des plugins disponibles, ils n’y sont pas tous mais il y en a déjà un bon paquet, par exemple il y a en un pour LESS, ou encore pour Jekyll.

comments powered by Disqus