Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

HTML5 : Optimisation des flux de production

Rassembler les modules Bower

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Une fois les librairies récupérées dans vos dossiers de travail, il est important d'extraire les distributions à placer en production. Bower et npm vous seront indispensables et Gulp vous permettra de tout automatiser.
08:04

Transcription

Il arrive parfois que nous ayons besoin d’installer dans plusieurs librairies JavaScript, et que ce qui va être important au final c’est d’une part de pouvoir les rassembler toutes au travers d’un seul et unique dossier, parce que vous avez vu que ça nous installe des bower_components qui sont des dossiers interminables. Et puis la seconde chose, c’est des fois il y a des conflits qui peuvent intervenir entre deux librairies. Donc regardez, ici si je pars sur un bower par exemple, install jQuery et je vais faire un save pour le sauvegarder dans mon bower json. En installant jQuery, bien sûr, il va me récuperer la dernière version de jQuery. Maintenant si je fais un bower install, et j’ai besoin d’utiliser une galerie d’images, donc lightbox2 je vais utiliser, et je vais faire un save également, là le souci c’est que les besoins de dépendance de lightbox2 ne sont pas les mêmes que la librairie jQuery qui est utilisée. Donc ici bower me dit : « qu’est-ce que tu préfères faire ? Est-ce que tu sais si pertinemment lightbox va supporter la 3.1.1, ou si toi tu es capable de pouvoir avoir simplement besoin de la 2.2.4 au niveau jQuery ? » Je n’ai pas obligé donc on va choisir la 1, la 2.2.4 et on va l’installer. Jusque là, c’est très bien. Maintenant ce que je souhaiterai, puisque si je regarde du côté de mon dossier, ici j’ai donc dans jQuery toute une série de distributions et de sources dont les distributions sont là. Mais si je viens dans lightbox ici, dans ma distribution, j’ai non seulement des js mais des css, des images, et puis au niveau des js, j’ai plusieurs versions de js. Donc lesquelles me faut-il ? Lesquels je vais utiliser en production ? Là, ça devient un peu compliqué, parce que ce que j’ai besoin c’est simplement de un lien à chaque fois. Donc on va utiliser pour cela npm. Alors npm, si je vais du côté du site de npmjs, ici on a un outil qui est génial, sous gulp, qui s’appelle gulp-main-bower-files. Eh bien, on va récupérer cet élément-là et on va le copier. Alors faites bien attention, depuis tout à l’heure, je fais un bower install mais j’avais un bower json et là maintenant je vais faire un npm install avec un save dev, mais bien entendu j’ai un package json. Donc si vous n’avez ni bower json ni package json, pensez à faire un bower init et un npm init, voilà. Donc ici, on va installer en arrière-plan ce package qui va nous être utile, et on va rentrer du côté du package json, vous voyez ici la dépendance, qu’une, qui va se peupler dès que l’installation va se passer. Alors au niveau maintenant de gulp, on va faire un main bower file, on va appeler puisqu’on est en train d’installer cette extension. Donc on commence par l’appel au fichier et puis on va faire un gulp, maintenant task, je vais invoquer une string que je pourrai appeler regroupedistribution, regroupedist et je vais placer une fonction anonyme à l’intérieur qui va me faire le job de ce regroupement de cette tâche. Donc pour cela, ce qu’on va utiliser, c’est : on va lui demander directement d’utiliser un return gulp src. Donc on va lui demander d’utiliser notre fameux bower json pour lui dire : « voilà, vas là, tu auras la carte d’emploi de tout ce dont on a besoin comme librairie ici. » Et puisque on va faire comme pipe, ici directement, ça va être donc cet objet mainBowerFiles ici qui va faire le job et qui va pouvoir nous extraire ce dont on a besoin. Bien sûr on va faire un pipe maintenant ici avec un gulp dest qui aura comme destination, moi je vous propose d’utiliser un dossier libs pour placer nos fichiers de sortie. Donc voilà, on a placé notre premier élement. Ce qu’on va faire c’est retourner dans la console. Alors je vais en profiter pour regroupedist, le copier ici, ça m’évitera de faire une erreur de syntaxe, et puis dans ma console ici, ce que je vais faire, alors on va faire un clear déjà pour bien nettoyer tout ça. On va faire un gulp ici, regroupedist, et je lui dis : « vas-y, recupère tout. » Alors il me dit : local gulp not found in. Ah, c'est-à-dire que dans mon package json, j’ai dû oublier de faire un install gulp. Donc ce qu’on va faire tout de suite ici, on va venir, on va faire un npm install gulp save dev pour la dépendance, voilà. On va installer tout ça, et puis on va pouvoir relancer juste après notre gulp regroupedist. Voilà, tout est installé. Donc on va remonter de deux hauteurs de commande, regroupedist, on le lance, et là à ce moment là tout a été realisé Donc si je retourne dans mon dossier, on a mis un dossier libs qui est présent ici, et à l’intérieur de libs, on a jquery et lightbox qui sont tous les deux dans une distribution, alors c’est bien beau tout ça mais il y a quand même une arborescence quoi lightbox, dist, css, images. Donc c’est un peu, quelque part, arboré, un peu trop arboré à mon goût. Alors on va jeter ce libs, et on va aller approfondir. Donc on retourne du côté de npm et là on va trouver une autre extension qui s’appelle gulp-bower-normalize qui lui va me permettre de pouvoir normaliser un peu la manière dont on va écrire les éléments. Il suffit de l’installer donc de retourner dans la console de commande, de taper cette installation, et de venir entre-temps compléter le gulpfile ici. puisqu'on va dans un premier temps faire appel à ce nouveau package ici, donc on va faire un require avec bowerNormalizer qui va faire cet élément-là, et puis ce qu’on va faire c’est simplement rajouter un pipe bowerNormalizer ici juste après, pour lui demander de normaliser cette écriture. Donc je retourne dans la console, tout s'est fait pendant ce temps-là, c’est parfait. Je relance cette fois-ci mon regroupedist, je lance l’élément, et ça y est c’est terminé. Alors j’en profite pour faire un petit clear, juste au passage, et je retourne dans mon dossier. Là j’ai mon dossier libs, c’est nickel, j’ai mon jquery, mon lighbox, et directement mon jquery qui contient mon js, mon lightbox qui contient tous les éléments nécessaires, sauf que vous avez vu que maintenant le gif et le png font partie tous les deux d’un dossier séparé puisque chacun des fichiers sont, on va dire, éclatés en deux modules différents. Une fois encore, je retourne dans mon élément et ici je vais retourner dans le bower.json ici. Dans le bower.json, on a la possibilité de pouvoir demander de faire des override, de faire des sortes de surécriture. Et ici je vais rajouter donc une propriété qui sera override avec deux r : overrides, et puis on va placer un objet json donc à l’intérieur, et je vais lui dire : « pour lightbox2, dès que tu vas rencontrer lightbox2, s’il te plait, j’aimerais que tu me normalise tout ça. » Et donc on va faire un coup de normalize, la propriété normalize ici, et donc dans cette normalize, je vais lui demander de passer un objet encore une fois, et dans cet objet je vais lui dire : « tu me créeras un dossier qui s’appelle images et dans cet objet images tu me placeras, j’ai un tableau ici, je vais lui dire tous les fichiers de type gif plus tous les fichiers de type .png. » Voilà, donc on peut comme ça, venir définir, alors j’aurais pu aller pour les jpeg, les JPEG, etc, tous les éléments qui peuvent être exploités dans ce type de librairie, voilà. Donc là, j’enregistre, je retourne dans ma console de commande, je vais redemander de faire un regroupedist, il part, il execute, c’est terminé. Je revérifie dans mon dossier ici et dans mon dossier, j’ai bien libs, j’ai ma librairie jquery, qui a un seul js, parfait, et ma lightbox qui a un dossier image qui contient à la fois les png et les gif, voilà. Donc vous avez la possibilité comme ça avec bower et npm, note package manager, de pouvoir installer des librairies JavaScript, extraire ces fichiers ensuite pour la production, afin d’avoir vos fichiers pointés sur un seul élément. Maintenant, on va voir qu’il faut pouvoir rassembler tout ce petit monde également.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 déc. 2016
Durée :5h29 (62 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !