Yeoman: Outils et méthodes pour améliorer son code

Quand vous faîtes du développement de sites web, quelque soit la technologie utilisée, vous devez faire face à un certain nombre de tâches à associer entre elles pour produire le résultat final.

l’ensemble de ces tâches forment un flux de travail, workflow qui devient au fil du temps bien difficile à maintenir manuellement, tout au moins si vous souhaitez conserver un minimum de productivité.

Si vous souhaitez exécuter les commandes présentées dans la suite de cet article, vous pouvez vous référer à la procédure d’installation pour Yeoman que nous avons écrite. Cette procédure installe conjointement Bower et Grunt.

Bower : Le gestionnaire de librairies

Bower se présente comme un gestionnaire de paquets pour le web. Il est comparable dans son fonctionnement à d’autres gestionnaire de dépendances comme gem, npm, pip … Il permet d’installer, mettre à jour et désinstaller simplement, proprement toutes les librairie, scripts dont dépend votre projet web.

Plutôt que le traditionnel, wget et tar, vous pouvez utiliser désormais bower install <package>#<version>, ex:

bower install jquery

Pour installer jquery dans sa dernière version. Vous pouvez aussi préciser une version particulière. La librairie est téléchargée depuis son dépôt officielle, dépôt Github… Et décompressée dans un répertoire bower_components. Il ne vous reste donc plus qu’à référencer ces ressources depuis votre code.

<script src="/bower_components/jquery/jquery.js"></script>

Vous recherchez une librairie en particulier ?

bower search jquery

Bower maintient un fichier des dépendances requises pour votre projet sous forme de fichier bower.json dont voici un exemple :

{
  "name": "wooster",
  "version": "0.3.0",
  "dependencies": {
    "normalize-css": "~2.1.3",
    "jquery": "~2.0.3",
    "sass-bootstrap": "~3.0.2",
    "modernizr": "~2.6.3",
    "font-awesome": "~4.0.3",
    "html5-boilerplate": "~4.3.0"
  }
}

Si ce fichier est présent, un simple bower install installe automatiquement les dépendances.

Faîtes un tour sur le dépôt des composants gérés par Bower pour vous faire une idée de tout ce qu’il est possible de gérer comme dépendances avec Bower.

Grunt : Le gestionnaire de tâches

Grunt est un gestionnaire, « exécuteur » de tâches. il permet d’automatiser toutes les opérations répétitives qui suivent l’écriture du code dans un projet web comme la minification, validation, vérification…

Il s’appuie pour ce faire sur des plugins qui lui permettent de faire à peu près tout ce que vous pouvez souhaiter. Il organise ces tâches dans des groupes qui vont permettre d’enchaîner celles-ci comme bon vous semble. L’ensemble de la configuration est gérée par le fichier Gruntfile.js et les plugins dont vous avez besoin sont eux consignés dans le fichier package.json.

Yeoman : L’orchestrateur

Yeoman n’est pas qu’un simple outil de plus. C’est un flux de travail, une suite d’outils et de méthodes de travail pour développer tous vos projets, plutôt orienté web (mais pas forcément).

Le flux de travail est composé de trois outils pour améliorer la productivité et le plaisir de coder une application web:

yo (Gestion de projet, scaffolding). Yo gère entre autres l’écriture de votre fichier de configuration Grunt en le complétant des tâches Grunt pertinentes que vous pourriez avoir besoin pour votre projet.
Grunt (Gestion des tâches). Grunt est utilisé pour construire, prévisualiser et tester votre projet, grâce à l’aide de tâches organisée par l’équipe Yeoman et les grunt-contrib
Bower (gestion des paquets et dépendances). Bower est utilisé pour gérer les dépendances, de sorte que vous n’avez plus à télécharger et gérer vos scripts manuellement.

Yeoman fonctionne par l’intermédiaire de générateurs qui permettent de commencer rapidement n’importe quel type de projet.

Par exemple, pour démarrer un nouveau projet contenant HTML5 Boilerplate, JQuery, Modernizr et Bootstrap, quelques commandes suffisent.

Installation du générateur:

npm install -g generator-webapp

Vous créez ensuite un dossier pour votre nouveau projet avec mkdir <projet> et vous déplacez dedans avec cd pour finir par:

yo webapp

Tout est installé et vous êtes prêts à coder votre nouveau projet !

Ces trois outils sont développés, maintenus et peuvent être utilisés séparément. Combinés ensemble il sont d’une efficacité redoutable. C’est ce que nous verrons prochainement dans le cadre du développement d’un site avec Jekyll.