Yeoman: Cas concret d'utilisation avec Jekyll

Le cas Jekyll

Si vous souhaitez produire un site rapide et efficace avec Jekyll, comme avec n’importe quel autre outil, il vous faudra effectuer un certain d’opérations pour produire le code le plus efficace possible. Parmi ces opérations, il est possible de noter :

la validation de la syntaxe des pages (CSS, JS, HTML…),
la concaténation des fichiers JS et CSS. La concaténation permet de regrouper en un seul appel tous les fichiers CSS nécessaires par exemple,
la compression et l’optimisation des images.

Jekyll n’étant pas doté en standard d’outils pour gérer ce genre d’opérations, ce qui est bien dans la logique du logiciel; il faut se tourner vers des plugins Jekyll pour effectuer ces tâches ou utiliser une chaîne d’outils extérieurs à Jekyll.

Nous allons donc combiner Jekyll avec la puissance de la chaîne d’outils et le flux de travail Yeoman pour obtenir une chaîne de publication puissante et évolutive. Nous allons utiliser avec Yeoman le générateur jekyllrb qui se définit comme :

Generator-jekyllrb encapsule Jekyll, le générateur de sites statiques; à l’intérieur du flux de développement Yeoman. Démarrez votre site avec Yo, gérer les dépendances avec Bower et automatisez les tâches de développement et de « build » avec Grunt.

Yo Jekyllrb

Vous devez avoir installé Yeoman et le générateur jekyllrb pour pouvoir exécuter les commandes suivantes :

Démarrage d’un projet, site

yo jekyllrb

Un joli dialogue se présente et vous pose quelques questions sur les caractéristiques du site que vous allez construire :

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

This generator will scaffold and wire a Jekyll site. Yo, Jekyllrb!

Tell us a little about yourself. ☛

Plutôt sympa non ?

Vous pouvez choisir un pré-processeur pour les CSS (Compass, Sass) et pour le JS (Coffeescript), d’auto-préfixer vos fichiers pour indiquer au cache que les fichiers ont changé par ce genre de questions :

Wire tools and preprocessors. ☛
[?] CSS preprocessor: (Use arrow keys)
‣ Compass
  Sass
  None

Vous indiquez où sont situés vos principaux fichiers d’assets :

Set up some directories. ☛
Nested directories are fine.
[?] CSS directory: css
[?] Javascript directory: js
[?] Image directory: img
[?] Webfont directory: fonts
[?] CSS preprocessor directory: _scss

Vous pouvez démarrer avec un modèle Jekyll par défaut ou HTML5 Boilerplate :

Choose a template. ☛
[?] Site template:
‣ Default Jekyll
  HTML5 ★ Boilerplate

Enfin, la configuration de Jekyll :

And finally, configure Jekyll. ☛
You can change all of these options in _config.yml.
[?] Site description:
[?] Post permalink style: date
[?] Markdown library: redcarpet
[?] Use the Pygments code highlighting library? Yes
[?] Number of posts to show on the home page: all

Il suffit d’éxecuter

grunt serve

pour avoir automatiquement un serveur web démarré sur http://lcoalhost:9000 et servant le contenu de votre site Jekyll. Pas si mal non pour démarrer un projet ? Voyons à l’usage ce qu’il en est.

Développement du site

Une fois la commande yo jekyllrb exécutée, vous obtenez un répertoire contenant :

drwxrwxr-x  4 yol yol 4096 nov.  26 14:43 .
drwxr-xr-x 19 yol yol 4096 nov.  26 14:34 ..
drwxrwxr-x 11 yol yol 4096 nov.  26 14:42 app
-rw-rw-r--  1 yol yol   68 nov.  26 14:42 bower.json
-rw-r--r--  1 yol yol   43 sept. 14 23:37 .bowerrc
-rw-r--r--  1 yol yol  331 mai   21  2013 _config.build.yml
-rw-rw-r--  1 yol yol 1294 nov.  26 14:42 _config.yml
-rw-rw-r--  1 yol yol  960 nov.  26 14:42 .csslintrc
-rw-r--r--  1 yol yol  213 avril 11  2013 .editorconfig
-rw-rw-r--  1 yol yol  112 nov.  26 14:42 Gemfile
-rw-rw-r--  1 yol yol  977 nov.  26 14:42 Gemfile.lock
-rw-r--r--  1 yol yol   11 avril 11  2013 .gitattributes
-rw-rw-r--  1 yol yol  444 nov.  26 14:42 .gitignore
-rw-rw-r--  1 yol yol 9265 nov.  26 14:42 Gruntfile.js
-rw-r--r--  1 yol yol  302 juin   6 01:14 .jshintrc
drwxrwxr-x 26 yol yol 4096 nov.  26 14:43 node_modules
-rw-rw-r--  1 yol yol 1057 nov.  26 14:42 package.json

Le dossier app contient le contenu de votre site Jekyll ainsi que les scripts Javascript, les feuilles de styles et médias nécessaires. Les autres dossiers et fichiers on été ajoutés par la procédure de démarrage Yeoman et permet de configurer les différents scripts, outils appelés par les tâches Grunt.

Tous les fichiers que vous modifiez dans le dossier app provoque par exemple un rechargement automatique de votre navigateur et contrairement à Jekyll par défaut, ce rechargement à également lieu quand vous modifiez le fichier de configuration Jekyll *_config.yml*.

À noter également que ce fichier de configuration possède une version de développement *_config.yml* et une version pour le build *_config_build.yml* qui surcharge la version de développement. Vous pouvez donc avoir des variables positionnées différemment en fonction du contexte d’exécution. Toujours du plus.

Installer de nouvelles dépendances

Vous avez besoin d’une nouvelle librairie pour votre projet de site web. Rien de plus simple avec Bower.

bower -S install jquery

Et vous avez installé JQuery dans sa dernière version et indiquez que celle-ci est désormais une dépendance nécessaire au projet.

Construction du site

grunt build

Et voilà votre site prêt pour la production. Au passage, tout a été concaténé, minimifié, préfixé, optimisé, bichonné, mitonné… Je m’égare ! L’ensemble de votre site prêt à être transféré vers votre site de production se trouve dans le dossier dist.

Extensions possibles

Il est possible d’étendre ce workflow « à l’infini » avec les différents modules proposés par Yeoman, Bower et Grunt.

Je vous recommande vivement de jeter un œil à ce flux de travail et d’outils si vous codez des sites web et autres interfaces web. Le temps consacré à son apprentissage est largement compensé par le gain en industrialisation, cohérence et productivité obtenus pour vos projets.