HTML5 : Optimisation des flux de production

Gérer ses librairies avec Bower

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous utiliserez beaucoup de librairies JavaScript. Les récupérer sur le web ainsi que la maintenance et la gestion de leurs interdépendances peut devenir complexe. Apprenez à gérer le tout plus facilement grâce à Bower.
06:12

Transcription

Si on ne travaille pas avec des cdn, cela veut dire qu’on va devoir télécharger chacune des librairies que l’on va utiliser, puis les transférer sur notre serveur de production. Alors, il y a des problèmes de dépendance, il y a des problèmes de version, de numéro de version, de mises à jour, etc. Et pour cela, il existe l’outil qui s’appelle Bower qui va nous permettre de pouvoir maintenir l’intégralité des librairies et de les télécharger. Alors deux choses à voir, la première c’est Bower, la seconde c’est git parce que Bower peut s’appuyer sur git. Si vous n’avez pas de git installé, pensez également à télécharger l'installeur ad hoc pour votre plateforme et l’installer directement depuis là. Pour installer Bower, première chose : déjà s’assurer si Bower est présent ou pas, sur la plateforme. Donc vous faites un bower -v ici et vous regardez, là il est installé. Si Bower n’est pas installé, vous allez faire directement npm install -g bower de manière globale, de façon de pouvoir y accéder depuis tout endroit, depuis tout dossier de travail de votre plateforme. Vous validez et vous laissez dérouler le procéssus de A à Z. Une fois installé, on va se rendre sur le dossier de travail de cet exercice et on va directement déplacer le pointeur de notre table de commande et puis on va pouvoir faire, comme on avait fait un npm init, eh bien, on va pouvoir faire un bower init. Et là, on va regarder ce qui se passe au niveau de notre dossier. Pour l’instant le dossier est vide, et on va nous demander de taper le nom du projet. Alors au niveau du nom du projet, on a un peu plus de latitude quand aux caractères à utiliser par rapport à npm init, mais bon là, on va utiliser un pem bower ici, description, on n'en met pas, le main file, on va le laisser tel quel, le keywords, pareil, l’auteur, bsebarte@puce-et-media, cela me va très bien, la licence MIT, ça me va très bien, homepage, parfait, et on va tout valider par défaut. Ici, on me propose le bower.json par défaut, je dis ok, et là, si je regarde maintenant au niveau de mon dossier, on s’aperçoit qu’on a un fichier bower.json, qui correspond à cette proposition-là, qui a été créé. Pour l’instant on n'a rien du tout d’installé, donc on n'a aucune dépendance qui a été mise en place. On va le laisser ouvert ici et on va se dire que par exemple on pourrait souhaiter travailler avec html5shiv ou avec bootstrap, ou avec jQuery, ou avec peu importe la librairie que l’on va vouloir utiliser. Alors, comment va-t-on trouver une librairie ? On va simplement se rendre sur le site de Bower ici, et on va chercher un package ici, et je vais dire : « je recherche par exemple html5shiv, » et une fois qu’on a validé cette recherche ici, on voit qu'on en a, on pourrait très bien vouloir travailler avec modernizr par exemple, et chaque fois qu'on va rechercher, eh bien on va voir les éléments qui existent et qui répondent à notre requête. Une fois qu’on les a trouvés, on va les installer directement depuis la plateforme. Donc on va lancer une première installation, en faisant un bower directement puisque voilà, Bower est installé, bower install html5shiv par exemple, et on va faire un save cette fois-ci. Alors on va pas faire un save dev, on va faire un save tout court, parce qu'en fait, les librairies on en a besoin aussi bien en production qu’en développement. Ensuite vous pourrez bien entendu faire un save dev si vous ne voulez l’utiliser que pour le développement. Mais dans la majeure partie des cas, on va en avoir besoin également pour la production. Donc ici on va installer bootstrap par exemple ici, si je fais un bower install bootstrap. Voilà. On revalide, et vous voyez que là automatiquement bootstrap a besoin de jQuery, et bootstrap ayant besoin de jQuery, automatiquement il est allé me chercher jQuery, il a recupéré, il me l’a installé, et il l’a placé dans mon dossier. Donc si je retourne maintenant du côté d’une première partie de bower json, on voit que jQuery n’est pas une dépendance jQuery est une dépendance de bootstrap et c’est bootstrap qui la requiert. Et si maintenant je viens dans le dossier, cette fois-ci ici, on a un dossier qui s’appelle bower_components et à l’intérieur de bower_components, j’ai chacune de mes librairies. En fait, ça va un peu plus loin que les librairies parce qu’en fait on a des distributions, on a des bower json, on a énormément de dossiers et de fichiers qui vont être stockés dans les bower_components et pas les librairies que l’on va utiliser. Alors par défaut, ça s’appelle bower_components mais on aurait très bien pu renommer cet élément. Alors regardez, si ici je supprime ce dossier, je le supprime, je le jette, si maintenant je reviens dans ma console et que je fais un bower install, eh bien, ça va reinstaller toutes les librairies que j’ai besoin. Si je fais un bower update, ça va pouvoir me mettre à jour automatiquement les librairies en fonction des dernières versions. Et si je reviens sur le site de Bower ici, que je vais dans la documentation, et que je viens dans la configuration ici, au niveau de la configuration, je m’aperçois que je vais pouvoir créer un fichier bowerrc file ici qui va pouvoir contenir un certain nombre d’informations pour pouvoir reparamètrer la manière dont Bower va se comporter. Donc regardez, si je viens ici et que je crée un nouveau fichier, ce fichier je l’enregistre directement, Chapitre_05, exercice 6, et je vais l’enregistrer comme .bowerrc. Et dans ce fichier, si je place tout simplement un objet, et dans cet objet, je place une propriété directory et cette propriété directory je l’appelle libs ici, si j’enregistre, CONTRÔLE-S, je retourne dans ma console de commande ici, et si je fais un Bower install, je lance mon installation, on voit bien que je vais réinstaller mon html5shiv, je vais réinstaller mon bootstrap, ma dépendance jQuery pour bootstrap, etc, tout est terminé. Et si je retourne maintenant dans mon dossier, cette fois-ci je n’ai plus un dossier bower_components mais j’ai un dossier libs qui contient l’intégralité de mes demandes. Voilà donc ici, comment on fonctionne pour l’installation de Bower, et puis le paramétrage et l’installation de librairies dont on va avoir besoin dans nos projets.

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 !