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

HTML5 : Optimisation des flux de production

Utiliser des sprites image

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Utilisez des sprites pour réduire le nombre de requêtes. Néanmoins, il s'agit d'un processus qui peut s'avérer complexe. Découvrez une tâche qui vous facilitera le travail.
07:49

Transcription

Il existe une autre manière d’optimiser à la fois les images et le temps de chargement. C’est d’utiliser des sprites. Donc, pour pouvoir utiliser les sprites, des fois c’est un peu compliqué parce qu’il va falloir fabriquer une super image et puis à travailler les classes qui vont avec, les positionnements, etc., et ça peut être fastidieux. Alors, on va voir que là encore, npm peut nous aider à gérer ce genre de tâche. Ici on a un fichier html classique avec l’ensemble des classes qu’on a vues par le passé, donc pomme, cerises, pamplemousse, etc., une feuille de style css classique qui pointe et qui indique simplement que c’est une liste, on dégage le texte et on fait flotter ces éléments-là. C’est tout ce qui a été fait. Et donc on va regarder au niveau du dossier ici, dans le dossier image, on a l’intégralité de nos images qui sont en noir et blanc. Et puis des images en couleur avec un _ _ _hover, pour pouvoir définir les états de survol. Voilà, donc il va nous falloir fabriquer nos sprites à partir de ce dossier-là et de ce fichier html. Alors, si je regarde du côté de npm, il existe plusieurs types de packages. Je vous invite à regarder par exemple gulp-sprite-generator, ou de taper dans npm.js directement ici tout ce qui pourrait ressortir avec sprite. Et vous trouveriez des packages pour grunt, pour node, etc. Nous, on va focaliser sur spritesmith ici qui est assez sympa, qui est même très intéressant à travailler. Et donc je vous invite à vous rapprocher de la page npmjs pour les options et puis pour les divers réglages. Et puis aussi du github qui est bien dédié et de pouvoir travailler avec les contributeurs, si besoin y était, pour encore améliorer ou affiner un peu les réglages qu’on pourrait avoir. Alors, du côté de gulpjs ici, on va travailler avec, première chose : importation des deux packages, gulp et gulp.spritesmith, et puis après on va créer une tâche qu’on va appeler sprite ici. Alors, au lieu de faire un return gulp.src directement dès le départ, on va passer par une variable spriteData ici, que vous pouvez appeler comme vous voulez. C’est simplement un nom arbitraire, qui elle, va contenir le gulp.src. Alors, tout ça pour pouvoir venir travailler de manière correcte sur le nommage de nos classes, vous allez voir. Ici on va lui dire : ta source tu vas venir les chercher ici dans img ici. Et dans le img on n’a que du png, oui, on n’a pas de jpeg alors. Si on aurait eu du jpeg, on travaillerait sur : « img/* », peu importe le nom, « . » on passerait dans deux accolades pour taper jpeg, png, etc. tous les formats de fichiers. Mais là, on n’a que du png, on peut taper directement du png. Et ce qu’on va faire, c’est : on va lui piper directement spritesmith, donc le package, spritesmith, voilà ici. Et ce spritesmith, on va le passer dans... on va lui passer plutôt un objet de paramètre. On a deux principaux paramètres qui sont imgName et cssname, qui vont être le nommage de notre image, et de notre css. Donc ici on pourrait l’appeler sprite.png. Et puis le cssName, on peut l’appeler également sprite.css, voilà. Alors je disais deux principales. Mais il y en a le troisième, et c’est surtout par rapport à elle qu’on est passé par une construction qui n’est pas un return direct mais par première exploration, puisqu’on va avoir besoin de régler certains paramètres au niveau du nommage notamment des cssSelector ici. Donc on va regarder ça en détail, ici avant venir définir. Alors, ce que je vais faire ici, je vais passer une fonction anonyme ici directement, et voilà. Pourquoi doit-on passer par cette fonction ? Parce que regardez, comment fonctionne spritesmith ? Spritesmith, ce qu'il fait c'est : moi je vais dans ce dossier, je tape dans la motte, je regarde toutes les images ici. Donc je vais oublier ce dossier _note, parce qu’on m’a dit de regarder que les fichiers png. Et donc, je vais prendre cerise.png, je vais créer une classe qui s'appellera cerise. Et ici je vais prendre cerise_ _ _hover, je vais l’appeler la classe cerise_ _ _hover. Et moi, il n’y a pas de pseudo classe qui s’appelle _ _ hover, mais j’ai une pseudo classe qui s’appelle :hover. Et je ne peux pas nommer mon fichier cerise:hover, parce que certains serveurs vont me dire : houlà, deux points, je n’accepte pas ce caractère. Donc ce qu’on va faire, c’est on va explorer tous les noms de fichier qui passent entre nos mains, et on va lui dire : si tu as des _ s’il te plaît, tu me les remplaces par un : Donc ce que je vais faire, je vais lui dire if ici, eh bien, if quoi ? Ici je vais forcément avoir un paramètre qui va m’être envoyé avec cette fonction, je vais lui dire : si dans ce paramètre, tu as la propriété name, forcément il y a un nom de fichier, et dans l’indexOf, c'est-à-dire que tu vas trouver une série de caractères qui correspondraient à _ _ _hover. Alors, comment va-t-il le savoir ? Il va le savoir parce que le retour d’une telle fonction sera égal à -1 ou pas. Donc -1 si j’en ai trouvé, voilà. Donc si ce n’est pas, = -1, ça veut dire que tu es en train de regarder un nom de fichier qui contient cet élément-là. Eh bien, ce que je vais faire, c'est : je vais faire un return. Alors attention ce n’est pas le return de src, donc le return qui irait vers gulpdest. Là, c’est vraiment le return de cette fonction-là ici, donc sur le cssSelector. Donc ici, je vais lui dire : tu vas me retourner un nom de classe. Alors nom de classe, vous pouvez l’appeler pomme, poire, scoubidou, il n’y a pas de souci. Moi, j’aime bien quand même avoir un nom de classe qui commence tous pareil parce que ça me permet de les ordonner, de les classer. Vous pouvez l’appeler comme vous voulez. Pour l’instant, j’ai opté pour le nom sprite surtout. Je vais l’appeler, je vais continuer, je vais rester là-dedans sprite-. Et ici ce que je vais faire, c’est au lieu de copier le argname, je vais faire un replace, ici. Et je vais lui dire tu vas me replacer la chaîne _ _ _hover, par la châine :hover. Donc en fait, ça me permet tout simplement de lui dire : si tu as ça dans ton nom de fichier, tu me remplaces ça par ça. Et ça c’est super. Et dans le cas contraire, c'est-à-dire que tu ne corresponds pas, je vais me faire tout simplement : tu me retournes, et ça je vais pouvoir venir copier ici tout simplement le argname directement, voilà. Tu n’as pas besoin de me le remplacer. Une fois que cette fonction sera terminée, et au terme de cette fonction, je vais pouvoir faire un return spritedata directement .pipe. Là je vais lui piper quoi ? Le gulp.dest directement. Et où vais-je envoyer tout mon petit monde, c'est-à-dire mon sprite.png, mon sprite.css ? Je vais l’envoyer ici dans le dossier css. Donc je vais lui dire : ici, ça, tout ça, tu me l’envoies dans le dossier css/, voilà. Et ici, j’ai terminé mon gulpfile. Donc je vais pouvoir enregistrer, basculer en ligne de commande, vous pouvez faire un gulpsprite directement, puisque c'était le nom de notre fonction. Ici, on termine. Tout a été fabriqué. Donc ok, parfait. Je vais retourner dans mon code ici. Et effectivement, j’ai un sprite.css qui a été généré. J’ai un sprite.png qui a été fabriqué pour moi, également. Donc tout fonctionne, c’est super. Le petit détail que j’ai besoin de faire, j’en ai deux ici, c’est de faire un link au départ, et de lui dire que tu vas aller attraper cette feuille de style que j’ai placée en sprite.css, puisque c’est le nom de mon fichier ici. Il va falloir que je vienne le récupérer. Et puis un deuxième truc, c’est que toutes mes classes, je les ai appelées par sprite-. Donc je vais commencer par sprite- par défaut sur ces noms de fichier. Je n’ai plus qu’à enregistrer cette partie-là, basculer dans un navigateur pour venir tester l’opération ici, voilà. J’actualise ma page. Et j’ai bien toutes mes images en noir et blanc. Et quand je survole mes images, j’ai toutes mes images en couleur sans avoir écrit une ligne de code, si ce n’est que quelques modifications dans le JavaScript et dans la formulation de mon fichier 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 !