Optimisation du développement avec Yeoman (Yo Bower Grunt)

Ces articles traitent d’optimisation du workflow de développement, pour gagner du temps simplement avec Yeoman, qui est une suite d’outils : Yo, pour générer du code, Grunt pour lancer des tâches répétitives automatiquement et Bower pour gérer les librairies installées et la compatibilités entre elles.

Les fichiers font d’Awesome (ou autre) ne sont pas dans le package avec yo angular

Les fichiers font d'Awesome (ou autre) ne sont pas dans le package avec yo angular

Tout s’est bien déroulé pendant le développement, votre application Web est jolie, le style rend bien, les icônes de Font Awesome dans les menus sont parlantes.
Mais, vous commencez les tests après avoir packagé avec grunt build, et là c’est le drame. Les icônes ont disparues !

La cause est simple : les fichiers de police utilisés par le CSS ne sont pas copiés.
Voyons comment ajouter une tache Grunt qui se charge de cette copie.

Mettre en place blueimp-file-upload avec AngularJS

Mettre en place blueimp-file-upload avec Angularjs

Vous voulez ajouter un module d’upload de fichiers dans votre application Web AngularJS ?

Blueimp-file-upload est un candidat idéal : il est simple, plein de fonctionnalités et propose les directives adaptées à votre framework JavaScript préféré.
Voyons comment l’intégrer pas à pas.

Démarrez grunt depuis Brackets

Démarrez grunt depuis Brackets

Comme vous le savez, j’utilise l’éditeur Brackets et les outils de Yeoman, notamment Grunt, pour le développement d’applications Web. Ainsi, pour démarrer une tâche Grunt, j’avais besoin d’une console ouverte, dans le bon dossier et de jongler entre les fenêtres de l’éditeur, du navigateur et de la console.

Mais ça c’était avant.

Améliorez votre processus de développement AngularJS avec Yeoman – partie 1

Développement AngularJS avec Yeoman

Pendant le développement d’une application, certaines tâches, comme la création de packages ou les tests, doivent être effectuées fréquemment. Même si celles-ci ne sont pas forcément très longues, les réaliser manuellement prend du temps qui pourrait être consacré à autre chose. Et je ne parle pas du risque d’erreur, qui lui-même implique une nouvelle perte de temps.

Yeoman répond à cette problématique. Voyons un aperçu de ses fonctionnalités, appliquées à AngularJS dans cette grande saga… en deux parties.

Les autres thèmes parlant de Optimisation du développement avec Yeoman (Yo Bower Grunt)