Introduction
Avec autant d’outils disponibles pour les développeurs web aujourd’hui, il peut parfois être difficile de comprendre comment tout cela s’assemble et fonctionne.
Construire la structure de son projet « from scratch » et organiser son code et ses dépendances n’est pas toujours évident. Yeoman va nous aider à résoudre ce problème, et vous lancer sur de bons rails en générant la structure de base de votre projet (scripts, librairies, tests, …). Le code généré par yeoman est le fruit de l’aggrégation des meilleurs pratiques du web qui ont évoluées au sein de l’industrie.
Dans cet article, vous allez apprendre comment exploiter Yeoman afin de pouvoir de créer des applications web solides.
Qu’est-ce que Yeoman ?
Yeoman est une collection de trois outils : Yo, Grunt, et Bower. Combinés ensemble, ces outils fournissent tout ce qu’un développeur a besoin pour démarrer son projet.
Yo – CLI tool for scaffolding out Yeoman projects
Yo est un outil qui est utilisé pour échafauder une nouvelle application. Il permet de créer la structure du projet, l’organisation des feuilles de style, des scripts, des ressources.
Grunt – The javascript task runner
Grunt est un outil basé sur nodejs qui vous permet d’exécuter des tâches écrites en javascript. Par exemple, avec grunt vous pouvez automatiser les builds, les tests, et le développement. Grunt s’appuie sur un grand nombre de plugins parmi lesquels on peut trouver.
Bower – A package manager for the web
Bower est un outil qui va vous permettre de gérer vos dépendances et librairies, les installer automatiquement et surtout les garder à jour, de sorte que vous n’avez pas à les télécharger manuellement.
Installation
Prérequis
Un guide complet est accessible directement ici, pour ceux qui voudrait rapidement l’essayer assurez vous d’avoir installé Nodejs , Git et optionnellement Ruby et Compass (si vous voulez utiliser scss)
Ensuite, en ligne de commande, installer yo
npm install -g yo
Comme yo dépend de grunt et bower, ces derniers seront installés automatiquement !
Maintenant, il faut installer un générateur de projet :
npm install -g generator-webapp
Certains générateurs embarquent yo, grunt et bower, et les installeront si nécessaire automatiquement. La liste des générateurs se trouve sur npm
Utilisation
Une génération de projet avec yeoman se déroule ainsi :
mkdir MyWebApp && cd $_ # Crée un dossier nommé MyWebApp et se place dedans yo webapp # Génère une structure de base bower install underscore # Installe les dépendances et librairies grunt # Pour builder le projet grunt test # Lance les tests grunt serve # Lance un serveur
Générateurs
Plusieurs générateurs sont disponibles via npm. Parmi les frameworks les plus utilisés, on trouve facilement les générateurs associés :
npm install generator-backbone yo backbone # Génère la structure yo backbone:model article # Génère un modèle yo backbone:collection article # Génère une collection yo backbone:router article # Génère une route yo backbone:view article # Génère une vue grunt serve # Lance votre projet dans un serveur local
npm install generator-angular yo angular # Génère la structure bower install # Installe les dépendances grunt serve # Lance votre projet dans un serveur local
npm install generator-ember yo ember # Génère la structure bower install # Installe les dépendances grunt serve # Lance votre projet dans un serveur local
Et si cela ne vous suffit pas, vous pouvez aussi écrire votre propre générateur et ainsi optimiser d’avantage votre productivité, ou contribuer à la communauté en soumettant votre générateur sur npm. Pour les plus courageux suivre le guide ici
Plugins grunt
Une multitude de plugins va vous permettre d’augmenter votre productivité et automatiser vos tâches : validation du code, minification et obfuscation du code source, zip des sources, live reload, lancer des commandes shell, déployer sur un serveur … Voir ici pour tous les plugins disponibles.
Pour installer un plugin grunt, éditer le fichier package.json à la racine du projet pour ajouter le plugin. Exemple :
{
"name": "MaWebApp",
"version": "1.0.2",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-compress": "~0.7.0",
"time-grunt": "~0.2.1" ## Ajoutez vos dépendances après cette ligne
},
"engines": {
"node": ">=0.8.0"
}
}
Ensuite, dans votre terminal :
npm install
Cela va installer automatiquement les nouvelles dépendances que vous avez ajoutées.
Conclusion
Ceci n’était qu’un aperçu des possibilités qu’offre Yeoman. En utilisant les générateurs de base et en inspectant le code généré, vous comprendrez mieux comment tout ces composants fonctionnent ensemble, et vous ouvrira surtout de nouvelles perspectives dans vos workflows.