HTML5 : Optimisation des flux de production

Ajuster les dépendances et la taille des images

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Parfois, les plug-ins sont anciens et exigent des dépendances particulières. Apprenez à gérer cette situation. Puis mettez en place une tâche pour définir la taille des images dans les documents HTML.
06:15

Transcription

Toutes les tâches ne font pas que nous informer Ou nous préciser les modifications à faire sur un fichier, On peut également avec une tâche intervenir directement sur le fichier. Si je prends ici cette illustration, On se retrouve dans un document HTML qui propose une galerie d’images, Et ou pourrait souhaiter rajouter l’attribut width et height Afin d’optimiser la prise en charge par le navigateur de chacune de ces images. Pour cela on va se rapprocher une fois encore de npmjs Pour trouver dans le catalogue, Le plug-in qui correspondrait à nos besoins. Ici volontairement c’est grunt-inline-imgsize Qui a été récupéré. C’est un plug-in qui date de 3 ans. Et surtout il n’y a eu qu’une seule et unique version proposée, Puisque c’est la 0.0.1, Qu’il n’y a pas eu de modifications de faites. C’est vrai que le plug-in peut d’entrée de jeu Fonctionner et remplir sa tâche. Mais par rapport à certaines dépendances, Sur des versions plus contemporaines de Grunt, Ça peut causer des incompatibilités. Pour pouvoir vérifier cela, Déjà regardons du côté des fichiers sources qu’est-ce qu’on a. On se retrouve avec un document HTML. On a le Gruntfile.js prêt à être rempli, Et puis on a un JSON justement qui a une première dépendance installée, Qui est un grunt version 1.0.1 qui a été mis en place. Si on regarde ici du côté du dossier, On s’aperçoit qu’on n’a pas de node_modules Donc il va falloir jouer sur le package JSON, Pour pouvoir installer la dépendance au moins de Grunt dans un premier temps. Donc première chose, On se retrouve ici et on va pouvoir faire un npm install Encore une fois, je le répète pour cette fois-ci, Si vous n’aviez pas de package JSON, il faudrait faire un npm init Et instancier un premier dossier. Donc ici on va lancer l’installation de ce node_modules à propos de grunt. Et une fois l’installation faite, On s’aperçoit que dans le dossier cette fois on a bien tous nos fichiers, Y compris le fameux dossier Ce qu’on va pouvoir faire maintenant c’est demander l’installation de Grunt-inline-imgsize avec le sav-dev Pour pouvoir mettre à jour le fichier package JSON, Là on s’aperçoit qu’on a une erreur. Et l’erreur est assez explicite, Elle nous dit attention, Le package grunt 1.0.1 ne satisfait pas les dépendances, Il faudrait avoir un 0.4.0 pour pouvoir travailler. Alors ce qu’on va faire, Dans un premier temps on va faire un non-install On va faire un npm uninstall Au même stade que ce qu’on faisait au niveau de l’installation. Cette fois-ci on demande de désinstaller qui ? Grunt. Et on va faire un save-dev ici pour mettre à jour le package JSON. Ça c’est une étape qui est relativement rapide généralement. Et là ce qu’on va faire maintenant c’est refaire un install cette fois-ci, Mais lorsqu’on va demander d’installer Grunt, On va rajouter un « @ » avec le « ~» Pour dire on voudrait une version à peu près équivalente Celle qui correspond le mieux à ce 0.4.0 Et bien entendu, On refait un save-dev derrière, Pour mettre à jour notre package JSON ici au niveau des dépendances. Donc l’installation se fait, Et on va pouvoir, Une fois que cette installation de Grunt a été refaite, Relancer cette fois-ci, Le grunt-inline-imgsize save-dev pareillement Pour pouvoir cette fois-ci, Être en compatibilité entre les deux dépendances. N’oublions pas qu’on peut récupérer toutes les informations nécessaires Ici sur la page npmjs Donc on peut directement copier-coller là-dedans. Et puis retournons au niveau du package JSON Voir qu’on a bien inline-imgsize qui a été installé dans sa version 0.0.1 Et surtout que Grunt a été remis au niveau 0.4.5 Côté Gruntfile on va reprendre au niveau de notre module.exports, Dans ce module.exports on va pouvoir rajouter le loadtask Qui va permettre de charger le plug-in nécessaire. On va pouvoir replacer notre configuration Donc un grunt.initConfig ici, Avec une première demande de tâche qui serait, On pourrait l’appeler inlineImgSize Qui va considérer comme option unique, les fichiers à venir à observer. Dans ce fichier-là on peut passer directement Un tableau avec la source qui serait «*.html » Puisqu’en fait on peut faire directement tout ce qui va se passer à la racine À côté de ce Gruntfile.js On va pouvoir venir explorer tous les fichiers HTML qui s’y trouveraient. Et puis une fois que cette opération d’observation va se faire, On pourra initialiser ce inline-imgsize, Au travers d’un registerTask On pourrait demander par exemple, vérifier les tailles Qui invoquerait inline-imgsize directement comme étant une tâche. On n’a plus qu’à enregistrer notre document Gruntfile. Je vais venir copier cette partie ici. Et puis je peux passer dans la console maintenant. Et là au niveau de la console, on va demander de faire un grunt, Et on va directement demander, verifiertailles Et puis on le lance. Là il nous dit attention, il y a une petite erreur. Il me dit cette erreur, Je ne peux pas trouver dans un directory, Le fichier qui s’appellerait pommes. Alors regardez bien, Une première erreur qui a été faite. Si je rebascule dans le document HTML, On s’aperçoit bien que j’ai une pommes sans le fameux jpg qui serait placé. Donc j’enregistre cette modification, Je rebascule dans la console, Je redemande d’exécuter la tâche. Cette fois on voit bien que tout s’exécute. Vous voyez bien la différence entre, Il y a une erreur c’est en rouge, ça attire mon attention. L’explication m’est donnée sur l’erreur. Et puis maintenant en vert, Voilà ça a été exécuté, il n’y a pas d’erreurs Donc je rebascule dans UltraEdit, Vous voyez qu’en basculant dans UltraEdit, Il dit attention ce fichier à été modifié, veux-tu le recharger? Oui je le recharge. Vous voyez qu’au rechargement on voit bien la prise en compte intégrale De toutes ces largeurs, hauteurs qui ont été rajoutées dans le fichier. Bien sûr comment la tâche s’est débrouillée ? C’est ce qui se passe dans la boîte noire ça ne nous regarde pas. Mais elle est allée voir les images, Elle les a mesurées donc elle a cherché chacune de ces images, Elle les a mesurées et elle a récupérée les valeurs. Directement dans la partie HTML Dernier petit réglage à faire, vous venez sur la source ici, Vous copiez cette source. Vous voyez bien que le pommes.jpg est bien respecté dans cet endroit-là, De façon à pouvoir revenir coller dans notre document, Pour pouvoir retravailler sur ce document et appliquer des tâches, Tester et faire évoluer la tâche de travail. Pensez toujours à avoir des sortes de parties de sauvegarde Ici comme ça pour pouvoir réinitialiser votre travail.

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 !