Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

HTML5 : Optimisation des flux de production

Nettoyer les éléments inutilisés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'arborescence des projets se charge progressivement d'éléments inutiles. Nettoyez-les efficacement grâce au plug-in Grunt-unused.
07:31

Transcription

Lorsque le projet est mis en ligne, bien souvent il reste toute une série d'éléments, qu'il s'agisse d'images, de fichiers CSS, JavaScript qui ne sont pas utilisés par le projet, qui sont en fait des orphelins et qui vont polluer en fait quelque part l'arborescence de notre projet. Package grunt ici, qui va nous permettre de pouvoir les retirer. Alors, si je regarde du côté du projet, on se retrouve avec une imbrication un peu complexe on va dire, avec des documents HTML qui utilisent de l'image ici, des documents JavaScript qui sont eux-mêmes liés et qui peuvent pointer vers de l'image ici. Et donc ils vont nécessiter une certaine observation. Alors côté Gruntfile, on a simplement un projet vide, qu'on va pouvoir alimenter, donc je ne reviens pas dessus, le module exporte, en capsulant, l'initConfig, le loadNpmTasks et le registerTasks, tout cela est configuré, il ne nous reste que les options à venir paramétrer. Encore une fois, sur le site npm.js, on retrouve toutes les options dans le détail. Donc ici on va se focaliser sur l'écriture dans le JavaScript. Juste un petit détail, c'est qu'au niveau de l'installation ici, on peut ne pas avoir l'installation de faite, donc je vous invite à déjà faire pointer la ligne de commande sur le dossier en question, et puis de demander un listage des éléments. Donc vous voyez ici, je n'ai pas de node module, ici donc on va pouvoir venir faire directement, puisqu'on a un package.json qui est global, faire directement un npm install, tout est prévu, tout a été préparé, donc il n'y a plus qu'à lancer cette installation. Si je viens du côté du package.json pour regarder un peu de quoi il est composé, vous allez voir que vous avez l'intégralité des éléments nécessaires qui sont indiqués dans le devDependencies, et donc là, le gros intérêt c'est de faire directement un npm install. Pendant que l'installation se fait, on va pouvoir venir au niveau des options ici, et donc on va créer un objet options à l'intérieur de unused ici, et on va demander comme premier paramètre, les references, alors qu'est-ce que les références ? Les références, c'est le dossier qui va devoir être exploré. Quel est ce dossier dans lequel, on va venir chercher tous les éléments qui peuvent ne pas être utilisés ? Donc par défaut, on aurait tendance à dire : « je voudrais le FR_1250_03_07 puisque c'est là-dedans que je vais venir chercher. » On va se focaliser uniquement sur les images dans un premier temps, donc ici c'est une chaîne de caractères qui est recherchée, et je vais rechercher imgs au pluriel. Par défaut, la référence rechercherait un dossier qui s'appelle img tout court, pas de pluriel, c'est pour ça que j'ai volontairement placé un « s » dedans. Ensuite, on va dire un directory. Le directory, c'est à quel endroit se situe les fichiers qui peuvent contenir des images justement. Alors ici je vais simplement venir parler de ce document html ici et je vais récupérer donc, le fameux FR_1250 en excluant volontairement quelque part le document JavaScript. Ici - j'ai oublié un petit apostrophe - ici days, ça veut dire quoi ? Ça veut dire que le days, pour l'instant on va le mettre à 30, une valeur quelque part par défaut, mais il est surtout important surtout si j'utilise l'attribut remove qui va être de dire: « tu me les supprime, j'ai pas envie que tu me les listes, et si tu les supprimes, je veux que tu ne me supprimes que ceux qui sont plus vieux que 30 jours, donc parce que si j'ai des petits documents qui sont là temporaires, que je risque d'exploiter demain ou après-demain dans mon dev, tu me les gardes. » Et là donc, on va pouvoir avoir tout intérêt à faire ce genre de démarche. Alors là, je le mets à false parce que je ne veux pas retirer les éléments. Et ensuite, est-ce que tu vas me reporter tout ça dans la console ? Eh bien, je veux que tu me fasses un reportOutput ici, et ce reportOutput, je pourrais indiquer tout chemin que je voudrais et qui sera créé à la volée, et ici, je vais lui demander dans un report.txt : « tu me les enregistres dans ce format-là, à cet endroit-là. » Un dernier paramètre qui, par défaut, est false également, ici c'est fail. Je le mets bien à false ici, pourquoi ? En fait je lui dis : « dès que tu rencontres une erreur, tu t'arrêtes. » Là, dès qu'il n'y a pas de tag, il y aura des erreurs, il me les marquera, à la fois dans la console et à la fois dans le fichier de rapport ici. Donc ici, cet élément s'appelle unused et je l'ai appelé fichier au niveau de ma recherche ici. Donc je rebascule dans la console ici, je vais faire une clear ici, histoire de mieux y voir, je vais lui demander de me lister ce qui se passe et on voit bien que les nodes modules ont bien été installés, tous les éléments sont là. Donc je vais pouvoir faire un grunt fichiers maintenant directement, et là, on voit que tout se passe, il me dit : « il y a deux fichiers qui ne sont pas utilisés. » là je dis : « ah bon, lesquels ? » « Oignons et potimarrons. » Et report a été créé, parfait. Je rebascule là-dedans, je dois avoir mon fichier texte qui a été créé en rafraichissant l'arborescence, et si je l'ouvre, il me liste bien les deux fichiers : oignons et potimarrons de jpeg. Sauf que si je regarde bien, notre potimarrons est utilisé ici dans le fichier JavaScript. Dans mon Gruntfile ici, je vais pouvoir venir lui dire virgule, tiret, tiret ici et je lui dis : « tu vas aller chercher également un fichier qui s'appelle cette-fois-ci js/ » puisque n'oublions pas, je suis en relatif par rapport à Gruntfile ici, et je vais copier exactement la même chose que ça, sauf que je vais lui dire : « je suis dans le -1.js. » En fait je vais lui dire : « non, tu vas me chercher dans tous les fichiers .js ici à ce niveau-là. » Et si je viens relancer ma tâche maintenant, on va se retrouver cette fois-ci avec simplement les oignons puisque potimarrons est utilisé par le JavaScript. Alors, ce qu'on a vu au niveau maintenant de img ici, fonctionne également si je travaille avec js, regardez ici, si je travaille avec le dossier js, cette-fois-ci j'explore le dossier js, je retourne dans la console, je vais pouvoir lui demander, et là, cette fois-ci elle va me lister qui ? En fait, il me dit : « tu as un fichier qu'il va utiliser, c'est le 07_2.js. » Et on pourrait faire pareil avec un dossier css, etc., etc. Alors, vous allez me dire : mais pourquoi on ne le demande pas de regarder l'arborescence ? En fait, parce que le plug-in, tout aussi bien qu'il soit manque une petite fonctionnalité, alors je vais revenir ici dans mon travail et au lieu de lui dire : tu vas me chercher dans le js ou dans le quoi que ce soit, je lui dis: tu me cherches à la racine de document, donc je n'indique rien à la référence et je recherche bien tout ça, et si là, je le lance maintenant, vous allez voir qu'il va être extrêmement verbeux, regardez, il part, et là, ça l'attache, et vous avez vu que comme il est verbeux, et oui, il explore aussi le dossier de node_modules et tout ce dossier node_modules n'est pas réellement utilisé. Alors je ne peux pas tout lister puisqu'il n'y a pas assez de place dans la console, mais si je reviens actualiser mon fichier report, vous voyez qu'il y a bien le FR qui n'est pas utilisé, le Gruntfile qui n'est pas utilisé, les oignons, et le JavaScript. Donc, ce qui serait bien, ça serait de pouvoir lui dire : « écoutes, dans le Gruntfile ici, tu viens m'explorer telle référence mais tu m'exclues tel dossier de cette recherche. » Et là-dessus, si vous venez dans le guithub du développeur ici, il y a justement un point qui est demandé depuis quelques temps déjà, ça a été ouvert au mois de Mars, en lui disant : « ça serait bien de pouvoir ignorer les folders, » et le développeur a dit qu'en fait, pour l'instant, ce n'était pas une feature, une fonctionnalité mais que ce n'était pas une mauvaise idée et que donc il allait y travailler dessus pour pouvoir l'implémenter. Donc, restez connecté sur ce genre de développement parce que ça va nous permettre de pouvoir explorer plus finement les besoins d'arborescence dans nos dossiers pour pouvoir extraire à la fois les JavaScript, les images, mais aussi les CSS.

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
Date de parution :26 déc. 2016

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 !