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

HTML5 : Optimisation des flux de production

Regrouper les images

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Rapatriez les images et ajoutez un autre package Node et une nouvelle tâche Gulp. Le tour est joué !
05:16

Transcription

Donc voici on a pu récupérer la concaténation de tous les fichiers JavaScript et css en un seul et unique fichier pour chaque langage mais on n’a pas récupéré les images et il va falloir qu’on récupère les images. Ce que je vous propose de faire c’est de placer le pointeur directement dans le 05_09 ici, de faire un bower install pour se retrouver exactement dans la même configuration que le fichier numéro 9 avec la petite histoire pour le lightbox, rappelez-vous. Voilà, donc : 1 et puis après de faire un npm install directement et de laisser l’installation se produire. Alors si on retourne maintenant du côté de notre gulpfile ici, on a simplement des tâches pour gérer les images. Donc créons cette tâche, on va l’appeler copyImages tout simplement pour copier les images, et on pourrait essayer de faire un return simplement, qui serait un gulp.src, on irait chercher dans le dossier temporaire, bien sûr dans peu importe le nom du dossier intermédiaire qu'on aurait, il contiendrait un dossier qui s’appelle images. Alors peut-être qu’il faudrait voir si d’autres extensions utilisent d’autres nommages que images, mais img ou autres, de venir placer une expression régulière qui permettrait de récupérer cet élément-là, comme on va faire d’ailleurs pour les extensions, sinon lui dire : quelles que soient les images, que ça soit du png, du gif, du jpeg par exemple, ou du jpg tout court, à ce moment-là, une fois que c’est terminé, tu me fais un pipe et tu les places dans le dossier de destination qui serait libs/images. On peut essayer de faire ce genre de démarches-là, et la seule chose qu’il va falloir faire, c’est récupérer copyImages ici et dire : copyImages, je le rajoute après avoir concaténé les JS ici, voilà. Donc je vais pouvoir retrouver mon copyImages ici. Je vais pouvoir créer également une tâche intermédiaire qui serait de dire : j’aimerais pouvoir exécuter une tâche par défaut ici, qui serait d’abord d’exécuter regroupedist et puis après d’exécuter concat, qui fait que ça me donnerait, soit de faire concat, et je concatène que mes images, mais bien entendu, pour pouvoir concaténer que mes images quand même, ça serait bien, mais il faudrait que j’ai regroupedist qui soit fait. Alors ça, ce que je peux faire, c’est prendre un objet regroupedist, comme ça, et à venir le rajouter dans concat à chaque fois, c’est-à-dire lui dire : attention tu ne pourras exécuter concatJS que lorsque tu auras fait regroupedist, voilà, et ça, pareil pour concatCSS, et pareil pour copyImages, voilà. Donc en gros, copyImages ne pourra être fait que quand regroupedist sera fait. Et si j’appelle défaut, je vais demander regroupedist et puis concat, et concat ici parfait, je pourrai exécuter concatJS, concatCSS et copyImages. Alors-là pareil, on pourrait aussi demander que concatCSS ne soit exécutée que quand concatJS sera fait, etc. Donc c’est à vous de voir après les précédences que vous voulez. Alors ce qu'on va faire c’est de retourner maintenant dans notre console, donc tout a été installé, on va un peu nettoyer tout ça, et ici si je fais un gulp par défaut, je lance, et donc je vais faire d’abord le regroupedist. Une fois que regroupedist est fait, je refais les concat, je fais tout le monde, et donc j’ai pu réaliser toute ma partie. Regardons du côté du schéma, ce que cela donne. Donc j’ai mon temporaire ici qui contient tous les dossiers de chacune de mes librairies et dans libs ici, j’ai un dossier images, un dossier main, et dans ce dossier images, j’ai mon lightbox et mon images. Le problème c’est que voilà, j’ai pas pu garder une séparence-là, j'ai, mais vraiment, ce dossier lightbox, alors ce que je vous propose de faire, c’est de supprimer tout ça, et de retourner voir du côté de npm.js, encore une fois, s’il y a une solution, et la solution s’appellerait gulp-flatten, qui est un outil qui va me permettre de pouvoir aplatir ce genre de chose-là, et donc de faire fi des chemins relatifs. Donc ici j’ai plus qu’à faire un npm install gulp-flatten, ne vous inquiétez pas, si vous avez fait le nmp tout à l’heure, install le gulp-flatten était déjà présent dans l’installation, donc elle, ce sera faite. La seule chose qu'il va nous falloir faire maintenant, c’est de venir rajouter ici dans la partie haute un appel à ce package, donc on va appeler une variable flatten ici, et puis de venir ajouter un pipe au niveau ici, de nos images, de faire un pipe, on va appeler la fonction flatten ici, ce pointeur que l’on a créé ici. Voilà, donc si je relance maintenant mon gulp, tout simplement, eh bien, on va exécuter toutes les mêmes concaténations que par le passé, mais quand on va copier nos images, on va venir faire ce flatten, qui au niveau du libs définitif, on a images, et là, dans images, on a directement nos images, on n’a plus l’arborescence respectée que l’on aurait eu pour chacun de nos éléments. Voilà donc, jusque là ça nous a permis de pouvoir rapidement extraire toutes les librairies qu’on avait, et surtout maintenant, vous avez vu avec quelle souplesse on peut avoir, il suffit de revenir ici, de jeter les éléments, de faire un bower update, on récupère, on réinstalle, et ça se passe presque qu’en ligne de commande, on n'a aucune intervention de téléchargement ou d’ajustement à fabriquer.

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 !