25 January 2016

Gulp & Node.JS - Automatiser l'inclusion des dépendances et de leurs assets

Quand on crée une application web, on commence par faire beaucoup de "bower install — save", "npm install — save" et/ou "composer install" dans notre terminal, car aujourd'hui on dépend beaucoup de composants externes.
 
Mais lorsqu'il y a beaucoup de dépendances, il peut être ennuyeux, répétitif et source d'erreur d'inclure "a la main" tout ces assets dans nos templates. Et c'est pourquoi nous avons décidé, pendant la reconstruction de notre workflow avec les outils Javascript Node.js, Yeoman et Gulp, d'automatiser cette tâche abrutissante.
 

Le plugin gulp-inject

 

Nous sommes parti de gulp-inject un plugin gulp conçu pour inclure des références de fichier dans des templates. Pour le faire fonctionner, écrivez des commentaires dans votre fichier index.html et créez une tâche gulp. Celle-ci ciblera votre fichier index.html comme source et aura pour argument un tableau comportant le chemin des fichiers à inclure.

Cette méthode demande de tenir à jour un tableau statique de tout les dépendances, que nous devons incrémenter pour chaque dépendances installée. Mais nous voulons un workflow avec le moins d'intervention humain possible (une commande dans le terminal maximum). C'est pourquoi nous avons décidé de créer notre propre module Node.js pour améliorer le workflow proposé par gulp-inject

 

Créer notre propre méthodologie par dessus

 

Ce module s'appelle av-gulp-injector. Le préfixe "av" signifie "AppVentus" car nous l'avons conçu pour nos besoins spécifiques : il est orienté Symfony et supporte notre environnement technique (Sass, Twig et les autres composants Symfony).

Dans ce module, nous avons introduit les fichiers "injector.json". Ces fichiers fournissent une collection de tag (utilisé pour identifié différents endroits distinct qui peuvent accueillir une injection), les chemins de fichier pour ce tag.

Avec ce modèle, nous pouvons écrire des fichiers injector.json partout dans l'application et dans nos composants externes. Le module av-gulp-injector trouvera ces fichiers JSON, il les lira, et injectera les assets référencés.

Conclusion

 

Et notre but est atteint ! Plus besoin d'alimenter un tableau statique avec les assets à implementer comme on devrait le faire avec gulp-inject stand-alone. Nous pouvons simplement inclure le script dans une tâche gulp qui sera lancée après les  "bower install — save", "npm install — save" et/ou "composer install" et gagner un temps précieux.

comments powered by Disqus