Tutoriel Vidéo Yeoman Yeoman

Télécharger la vidéo

29-01-2014 17:10:00

Yeoman est un outil qui va vous permettre de démarrer un projet web en un instant en utilisant la pluspart des outils front-end disponibles aujourd'hui.

En effet, avec tous les outils actuellement à disposition des développeurs front-end, commencer un nouveau projet peut s'avérer être un vrai casse tête :

  • Télécharger les librairies javascript nécessaires au projet (jQuery, Angular...)
  • Télécharger les bootstraps CSS (Twitter, Foundation...)
  • Créer les tâches Grunt
  • Configurer le serveur de développement
  • ...

Le but de Yeoman est de résoudre ce problème à travers des générateurs qui vont vous permettre de mettre en place vos projet en un clin d'oeil.

Installation

Yeoman est un module nodeJS donc son installation est on ne peut plus simple

npm install -g yo

Et voila !

Utilisation

Pour utiliser yeoman il vous faut télécharger des générateurs. On va commencer par un générateur classique : le générateur webapp qui vous permet de générer une application HTML/CSS classique.

npm install -g generator-webapp

Une fois installée on se place dans le dossier souhaité et on peut générer notre application avec

yo webapp

L'assistant apparaîtra alors en vous posant quelques questions pour personnaliser l'application à générer.

Une fois que vous aurez répondu à ces questions yeoman va commencer à travailler en générant une base pour votre projet, en téléchargeant les dépendances avec Bower et en générant une configuration Grunt cleft en main.
Si vous souhaitez commencer à travailler sur votre projet vous pouvez utiliser la tâche serve

grunt serve

Cette tâche va démarrer un serveur nodeJS qui vous permettra de voir votre page en live, mais aussi lancera la commande watch qui compilera automatiquement les fichier SCSS en refraichissant le navigateur automatiquement à l'aide de livereload. Elle est pas belle la vie ?

Une autre tâche est disponible afin de mettre votre site en production. En effet c'est bien de travailler sur des fichier SCSS, et avec des librairies Javascript, mais ça ne nous intéresse pas d'avoir tout ça en production.
Pour lancer les tâches liées à la production :

grunt

Cette tâche va générer un nouveau dossier dist à la racine de notre projet qui va contenir tous vos fichier minifiés et nettoyés

Conclusion

Voila un rapide survol du fonctionnement de Yeoman. Le mieux pour découvrir cet outil c'est évidemment de l'essayer et de farfouiller dans les fichiers générés pour comprendre son fonctionnement.

Il existe déjà pas mal de générateurs pour couvrir pas mal de cas. Même si c'est un outil destiné pour les développeur Front-end il existe aussi des tâches pour PHP donc il y a de quoi faire.