HTML5 : Optimisation des flux de production

Retirer le formatage

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les outils de nettoyage et d'optimisation sont indispensables. Utilisez-les pour commenter et optimiser vos structures HTML, notamment au stade de la production.
09:12

Transcription

En HTML, il est bon de pouvoir commenter abondamment l'intégralité de nos structures, de pouvoir tabuler, indenter au maximum le code afin de pouvoir le rendre le plus explicite, le plus lisible possible, le préparer avec toute une partie de travail mais qui va quelque part à l'encontre de l'optimisation du code, parce que ça fait beaucoup de caractères à charger, tous ces caractères retour chariot, espace et tabulation, toutes ces parties de commentaires inutiles on va dire, dans la production elle-même, et donc, il est bon là de pouvoir s'encadrer au moment de produire d'un plug-in qui va nous permettre de pouvoir nettoyer tout cela. Alors, il existe diversité encore un fois de plug-in qui sont disponibles. Là, j'ai opté pour htmlclean, qui contrairement à tous les autres, qui avaient trois ans d'existence et qui n'étaient jamais mis à jour pratiquement, on voit que celui-ci a été publié il y a 10 mois mais qu'il est continuellement remis à jour, on s'aperçoit qu'il y a 36 re-versions qui ont étés faites et chaque fois il s'améliore en prenant par exemple ici le retrait, ne serait-ce que des petits espaces qu'ils soient ou non séparés par une balise, ils vont être nettoyés tous ces petits espaces, ça fonctionne sur du html, y compris sur du SVG, et surtout, cerise sur le gâteau, c'est qu'il existe aussi bien chez Grunt que chez gulp, donc vous allez pouvoir l'utiliser quel que soit l'automatiseur de tâche que vous allez utiliser. Alors, bien entendu, ici, on va se mettre en situation de production, donc on va regarder d'un point de vue déjà code, qu'est-ce qu'on a sous le capot. On a un fichier source pour pouvoir initialiser bien sûr, un package.json qui est déjà prêt, les nodes module ne sont pas là, donc ils n'ont pas étés installés, mais le package.json est prêt, et le gulpfile est vide, il va falloir pouvoir le concocter ensemble. Au niveau du package, soit vous faites une installation une fois que vous avez déplacé le pointeur de la librairie avec un npm install gulp-cleanhtml save-dev dans le dossier, soit vous faites un install grunt-cleanhtml save-dev si vous êtes directement dans un autre contexte. Donc maintenant ici, au niveau de cette possibilité, vous pouvez également faire npm install directement parce que dans les dépendances, grunt et cleanhtml ont étés prévus et donc ils vont pouvoir être installés. Voilà, les deux plug-in ont étés installés. Vous pouvez regarder du côté du dossier ici maintenant, vous avez bien le dossier de node_modules qui est apparu, et à l'intérieur on a bien gulp et gulp-cleanhtml qui ont été tous les deux travaillés. Alors maintenant on va se rapprocher du fichier gulpfile.js, et on va approcher cette fois-ci le chargement d'un plug-in, chose qui n'avait pas été faite dans nos précédentes approches puisqu'on faisait du JavaScript cousu maître. Alors ici, on va créer tout le temps, une première variable gulp qui, alors vous pouvez l'appeler comme vous voulez, on l'appelle gulp parce que c'est plus parlant par la suite et surtout si vous travaillez avec beaucoup de plug-in, il est toujours bon de donner le nom du plug-in directement au nom de la variable, mais bien sûr que vous pouvez l'appeler comme vous le souhaitez. Ici, on va travailler sur un require, on ne va pas faire un load-task, eh bien, on va faire un require et on va appeler le plug-in qui s'appelle gulp, pas besoin de lui donner d'extension ou quelconque signification que ce soit le require, on va chercher le dossier qui s'appelle gulp et théoriquement, le gulp choisira le fichier index.js ou si dans le main, on en redéfinit un autre fichier, on cherchera le fichier qui va bien pour pouvoir réaliser cette installation. Une fois le plugin gulp utilisé, on va simplement refaire une deuxième variable qui s'appelle cette fois-ci cleanhtml et qui, elle, va faire un require, et cette fois-ci on va appeler le nom du plug-in, c'est-à-dire gulp-cleanhtml. Maintenant on va créer notre tâche ici : gulp.task, et cette fois-ci cette task, on va placer à l'intérieur de la task ici une série de commandes qui vont nous permettre de pouvoir tuyauter on va dire l'intégralité des éléments. Donc déjà, la chaine de caractères qui va mettre d'invoquer cette tâche, ici, je vais prendre un défaut et je vais créer une fonction anonyme qui va, elle maintenant, jouer le jeu de contenir l'intégralité du déroulé de mes tâches, on va dire. Donc ici, je vais demander de prendre sur la variable gulp, la source du document qu'il va falloir venir affecter. Alors cette source, je peux la définir par n'importe quel moyen, c'est-à-dire que ça soit un tableau, que ça soit une liste, utilisez les étoiles, utilisez tout le type de document que je veux pour pouvoir cibler le fichier sur lequel je vais venir focaliser ma tâche. Donc ici, je vais aller de manière très nominative, et dire : « je veux attraper le 03-06.html. » Donc je vais vraiment invoquer ce document ici, mais j'aurais très bien pu faire un *.html aussi, ça aurait fonctionné de la même manière. Et là, maintenant, c'est là où on va venir tuyauter, on va utiliser la fonction pipe qui, elle, va venir câbler une première fonction à utiliser. Et là, la fonction que je vais utiliser c'est cleanhtml qui est une fonction native de ce plug-in que j'ai installé, vous vous rapprochez du npm.js pour pouvoir avoir la documentation ou du github, en l'occurrence qui est affecté par le développeur de l'extinction et vous allez pouvoir avoir toutes les propriétés, options et tout ce que vous pouvez mettre comme paramètres qui seraient placés sous forme d'objet ici à l'intérieur, quelle que soit l'extension que vous allez utiliser. Donc ici, on ne met pas, on va demander les valeurs par défaut et cette fois-ci dans le pipe, on va indiquer un gulp.dest, qui lui va dire : « tout ce que tu auras fait là, j'aimerais que tu le sortes dans une destination différente. » Je ne veux pas que ça enregistre le même fichier. On verra qu'un peu plus tard dans une autre étape qu'on peut vraiment enregistrer sur le même fichier, mais là, je vais lui demander de passer d'un dossier qui s'appellerait sortie, et tu m'appelleras donc le fichier par le même nom du fichier que je suis en train de travailler, mais cette fois-ci sur la partie sortie ici. Donc une fois toutes ces tuyauteries, on va dire, tout ce cheminement que tu auras fait, j'aurais pu en placer plusieurs bien entendu, mais ce sera terminé et donc tu vas enregistrer ça dans la sortie. Donc je vais dans la console maintenant ici et je vais lui demander tout simplement un gulp, donc comme c'est par défaut, je n'ai pas besoin de préciser de fonctionnalité, lui il va chercher la fonctionnalité par défaut et il va exécuter tout ça. Il me dit : « ça y est, j'utilise gulpfile, j'ai démarré la partie défaut que tu appelles, j'ai terminé, c'est terminé, je te rends la main. » Donc ici maintenant, je vais pouvoir revenir dans le navigateur ou dans l'éditeur de code pour venir vérifier ce qui s'est passé. Donc si je regarde maintenant dans sortie, je vois bien que j'ai un document html qui est placé et si je l'ouvre, on voit que tous les commentaires ont été retirés, tous les espaces ont été retirés et que le fichier html a été vraiment compacté à ce niveau-là. Alors si je regarde, toujours penser depuis un navigateur, ici je suis dans la partie avant, donc voici à quoi ça ressemblait. Maintenant je suis dans la partie après ici, et si j'actualise, est-ce que ça ressemble à la même chose ? Ça ne ressemble pas du tout à la même chose donc j'ai une petite erreur qui a été générée ici et qu'il va falloir que je vienne contrôler. L'erreur, on peut déjà la comprendre, c'est que j'avais mon document html qui faisait une liaison vers un fichier css au même niveau, alors que là, quand je l'ai enregistré, maintenant je ne me trouve plus du tout au même niveau puisque je suis au niveau de sortie. Et donc, si je regarde bien ici, c'est mes chemins d'accès qui sont faux, mais le premier ici, je vais rajouter un ../, et ici je vais rajouter un ../ également. Si j'enregistre ce document maintenant, je rebascule dans le navigateur et j'actualise, on voit bien que c'est revenu. Pas tout à fait. Regardez, ici j'ai un espace qui est généré ici je n'ai pas d'espace, pour quelle raison ? Tout simplement parce que j'ai utilisé dans mes css, un display inline-block, donc si je regarde ici dans la partie css, je vais ouvrir le fichier css, je suis dans un display inline-block, et donc automatiquement, ce inline-block représente l'espace, et si l'espace est préservé, je le retrouve, si l'espace n'est plus préservé, je ne le retrouve pas. Regardez, je vais prendre mon fichier html de base ici, et si dans le Home et leAbout, je retire cet espace ici, CONTRÔLE-S, j'actualise, je rebascule dans le navigateur, mais cette fois-ci dans le premier, voyez, ici le Home About n'a plus la liaison entre les deux, donc là, je suis dans du pur css et je vous invite donc à vous rapprocher d'informations sur le positionnement css dans notre catalogue afin de pouvoir mieux comprendre, et maîtriser ce genre de gymnastique dès lors que vous allez retirer le formatage d'un document HTML forcément, vous allez rentrer dans ce genre de comportement. Un petit détail cependant qui n'est pas des moindres, c'est que si je regarde le fichier de sortie ici maintenant donc, je me retrouve avec un document qui fait 3.64 kilos, et vous avez vu que j'ai un tout petit document. Alors que si je regarde le document d'origine ici, et que je viens regarder son poids, on s'aperçoit qu'ici, je vais passer à 5.03 kilos. Donc on se retrouve quand même dans un gain de 1.4 kilos, ce qui représente près de 30% quasiment sur simplement un petit contenu. Donc imaginez-vous sur un gros site, vous allez pouvoir gagner énormément, et là on n'a fait que la partie html.

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 !