HTML5 : Optimisation des flux de production

Nettoyer et tester

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Depuis plusieurs étapes, vous travaillez et vous manipulez des fichiers JavaScript. Nettoyez-les et vérifiez le bon fonctionnement.
09:11

Transcription

Alors je vous propose dans cette étape 10, pour conclure un peu cette aventure entre bower, npm et les librairies JavaScript, c’est que quand même on fasse un peu de nettoyage parce que c’est pas très propre. Regardez bien, on a un dossier temporaire qui n’a rien à faire là et qui se retrouve au milieu, donc qui peut causer des soucis, puis on a un dossier librairie qui, volontairement ou involontairement, très mal toujours ce main.js donc on va voir un peu de se séparer de tous ces éléments, et puis surtout on fabrique des concaténations et des ugliférations de tout ce qu’on veut de JavaScript mais on n’a rien vu qui fonctionnait pour l’instant. Dans l’idée c’est aussi d’utiliser ce fichier html avec une galérie et voir que ça fonctionne tout simplement. Alors, déjà dans un premier temps, pour pouvoir faire le nettoyage, je vous propose qu’on se rapproche encore une fois de deux éléments gulp, un premier qui va être Delete files and folders, del, et puis le second qui sera vinyl-paths qui va nous permettre de récupérer le chemin en cours d’exploitation qui est dans le stream actuellement, donc on verra deux manières de pouvoir utiliser del ici, et puis donc un fichier html qui pour l’instant ne fonctionne pas dans le navigateur, et pour cause, il ne connait pas jQuery. Alors si je regarde du côté du html, on a simplement un fichier Nettoyer et tester, qui pointe vers un fichier JavaScript, et ce fichier JavaScript écrit à la main utilise jQuery. Donc on n’a ni jQuery installé, ni lightbox installé, ce sont des choses que l’on va aller récupérer théoriquement dans notre fichier main.min, qu’il soit js ou css. Ici on en était resté au niveau du fichier numéro 9. Je vous propose donc qu’on commence par installer, si c’est pas déjà fait, pointer le curseur de votre console sur le dossier numéro 10, et puis faites un bower install et un npm install, bien sûr le package json contient l’intégralité des fichiers nécessaires. Donc dans ce gulpfile, maintenant ce qu’on va faire, on va retourner au niveau ici de la gestion, et on va placer notre del qui est require del et vinylpaths qui require vinyl-paths. On va créer une première tâche qui va être en fait de nettoyer en gros, dès le départ, les dossiers qui seraient éventuellement présents. Alors pour ça, je vais le faire en haut ici, on peut le faire où on veut cette task, on va créer un gulp.task ici, qu’on va appeler clean, et on va passer, comme à l’accoutumée, une fonction anonyme ici, voilà. Et on va simplement faire un return, del, et dans ce del on va passer un tableau. Alors le tableau, on va pouvoir le constituer de tous les éléments en fonction du chemin relatif dans lequel on est, que l’on veut supprimer. Donc je veux supprimer libs et je veux supprimer temp, s’il te plaît s’ils sont là. Voilà donc, c’est tout ce qu’on a à faire au niveau de clean. Par contre, il peut être intéressant maintenant de venir ici dans les tâches, on va supprimer cette partie-là. Plutôt que de la supprimer, je vais récupérer son intérieur ici, voilà. Ça, je vais le supprimer, c’était bien jusqu’à présent. Par contre ici, à partir de concat, on va placer cet élément-là, et je vais dire ici que je vais exécuter clean. Par contre, tant que pour regroupedist, regroupedist qui est ici, je ne pourrais l’exécuter que lorsque clean sera exécuté lui aussi, parce que sinon ça va me causer un souci. Alors ici, je vais lui dire : tant que clean n’est pas exécuté, tu attendras. Donc ici on exécute clean. Quand il est fini, il va passer en regroupedist. Et comme tous les autres attendent regroupedist, tout ça, ça me va, ça me convient. Alors, maintenant on va avoir besoin, au final de lui dire : quand même, une fois que tu as terminé, on va retirer ce temp, donc je vais venir créer une nouvelle task ici : gulp.task, et dans ce task, je vais l’appeler removetemp, pour remove temporaire, le dossier temporaire, fonction ici, native. Et là, on va faire un return gulp, donc une autre approche de travail que le del au départ quoi, qu’on avait fait au départ, en lui disant simplement les chemins d’accès. Ici on va lui dire : sur le chemin temp ici, puisqu’on a cet élément-là, on peut faire un pipe maintenant grâce à vinylPaths ici, je vais pouvoir lui dire de faire un del directement. Donc le chemin du stream, tu me le détruis, voilà. Donc ce chemin de stream, puisqu’on le détruit, il va retirer automatiquement le dossier temp, au final. Par contre, attention : c’est que si je fais ça, et que je n’ai pas terminé de copier mes images, que je n’ai pas terminé de concaténer et compagnie, ça va me causer soucis. Donc ici, je vais lui dire : hips, ici tu me feras ça que quand concatJS, concatCSS et copyImages sera terminé et tu pourras le faire. Et donc ici maintenant, le removetemp ici, je vais pouvoir le rajouter à la suite de mon travail de cette tâche par défaut. Jusque là c’est bien, qu’est-ce qui me reste à regarder ? Il me reste un petit détail à regarder. Ici j’ai fait un main.js parce que j’avais besoin de l’enregistrer pour éventuellement travailler dessus. Mais en réalité, on peut faire directement un rename direct. Et puis on n’a même pas besoin de faire un rename. Je pourrais très bien lui dire ici, et je supprime ces deux étapes. Alors bien entendu, si je supprime ces deux étapes, l’idéal c’est quand même de venir ici, au niveau du rename, le commenter. Alors je vais le garder ici tel quel, pour ne pas le supprimer, voilà. Voilà ici, et ce que je vais faire même, je vais faire mieux, je vais venir commenter cette partie-là, pour le garder dans le fichier. Hops, et je vais commenter la partie rename. Donc ici maintenant, on a terminé notre étape, tout devrait pouvoir fonctionner directement depuis la ligne de commande. Alors ici, on a bien notre dossier libs et temp, d’accord, on les regarde, et là je vais lancer le gulp par défaut, donc il y a pas besoin de travailler sur d’autres étapes. Ah, il me dit une petite erreur : c’est que gulp task clean n’existe pas, effectivement une petite erreur gulp ici, voilà CONTRÔLE-S, je retourne dans la commande, on redemande à travailler gulp par défaut, et là on laisse travailler et donc il nous fait bien le clean, il nous refait le regroupedist, le concat, tout a été fabriqué, donc on va vérifier maintenant dans le dossier. On voit bien au niveau du dossier qu’il n’y a plus de dossier temp, déjà très bien, et dans le dossier libs, il n’y a plus de main.js, donc c’est parfait, tout fonctionne. On va passer maintenant du côté du html, et dans le html, ici qu’est-ce qu’on a à faire ? Eh bien dans un premier temps, on va lier une fonction JavaScript ici, et dans ce script, qu’est-ce qu’on va placer ? Je vais venir copier toute cette partie-là, ça m’ira très bien ici. Par contre, ici ce que je vais demander, c’est d’aller dans le dossier libs. Dans le dossier libs, je veux trouver un dossier qui s’appelle main.min.js voilà, et la deuxième chose maintenant, c’est un link de feuille de style et dans cette feuille de style, je veux aller dans libs/main.min.css, voilà. Je veux vraiment aller sur ces deux éléments-là. Je retourne dans mon navigateur, j’actualise ma page, déjà tout se fonctionne bien, donc c’est parfait, sauf qu'ici, j’ai un petit souci au niveau de mes images, mais sinon ma librairie fonctionne bien. J'ai juste un petit souci au niveau de mes images qui n’ont pas été récupérés, certainement par rapport au flatten. On va aller regarder cela. Donc si on revient au niveau de la librairie et qu’on regarde ce qui a été généré ici, on voit bien qu’on a un dossier image, ce qu’on avait demandé d’ailleurs, mais au niveau du main css ici, ce qu’on attend, c’est d’avoir une image qui soit, si on regarde dossier, qui va être, alors attendez on peut faire ça, c'est vrai qu'il y a plus rapidement, voilà ici. Si on regarde nos images, elles se retrouvent toutes dans le dossier lightbox2/images/next. Et ça, ça nous vient de notre flatten ici. Rappelez-vous, on avait voulu avoir quelque chose de sympa au niveau du flatten ici, mais ça nous cause un petit souci. Ce que je vais faire, c'est que je vais copier cette image-là, je vais la coller ici, mais je vais la commenter ici, voilà. Donc on va commenter le flatten ici, et l’arrivée ici, de façon à dire qu'on veut utiliser cette fois-ci que libs tout court tout simplement. Et si j’enregistre, et qu’on revient relancer gulp ici maintenant, on ne va plus avoir un dossier image à l’intérieur, on aurait directement un dossier lightbox, alors pas besoin de vérifier, on peut directement aller tester dans le navigateur ici. Si j’actualise ma page, ça se passe bien. Quand je clique, j’ai bien mon image qui apparaît. J’ai bien ma croix ici de fermeture, je n’ai pas de souci de liens avec ces fichiers-là, et donc si je regarde une dernière fois du côté de libs, je n’ai plus un dossier image, mais un dossier lightbox2 qui est apparu.

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 !