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 jekyllrbUn 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
NoneVous 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: _scssVous pouvez démarrer avec un modèle Jekyll par défaut ou HTML5 Boilerplate :
Choose a template. ☛
[?] Site template:
‣ Default Jekyll
HTML5 ★ BoilerplateEnfin, 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: allIl suffit d’éxecuter
grunt servepour 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.jsonLe 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 configbuild.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 jqueryEt 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 buildEt 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.
