HTML5 : Optimisation des flux de production

Automatiser le rafraîchissement

Testez gratuitement nos 1273 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le développement d'un site exige de le tester en permanence dans un navigateur web. Apprenez à automatiser le processus à l'aide des tâches et voyez comment rafraîchir le navigateur en continu.
08:09

Transcription

Alors, prenons un vieil exercice qu’on avait fait, par exemple, au chapitre 5, exercice 11, et clonons-le directement dans le chapitre 6. Donc vous copiez uniquement le fichier img, js, et puis les trois fichiers de script ici. On n’a pas besoin du reste. Par contre, dès que vous aurez fait avec la ligne de commande un placement dans ce dossier ici, je vous invite à faire npm install, parce que tous les fichiers seront pris, et on va voir tous les modules dont on aura besoin. Alors maintenant, on se retrouve dans l’éditeur de code, avec un fichier html classique qui affiche une image de citron, et qui lance un JavaScript qui se situe dans ce fichier-là. Ce JavaScript en fait, qu’est-ce qu’il fait ? Il va faire du pur dom pour pouvoir installer une image de potimarron-2 ici. Et puis en gros ça va nous afficher ces deux images. On peut d’ailleurs regarder le résultat directement dans un navigateur. Alors, volontairement j’ai mis une petite dimension de navigateur pour pouvoir suivre en même temps et le code et la navigation. Alors voilà donc, l’idée maintenant c’est de pouvoir avoir une surveillance en temps réel de ce qu’on va faire. Alors, si je regarde du côté de gruntjs, nous avions mis en place un script qui valide js, qui va invoquer cette fonction jshint, qui surveille le dossier JavaScript, tous les fichiers qui se passent. Alors là j’en ai plus qu’un, j’ai enlevé le deuxième, parce qu’il me servait à rien, le second. Donc ici, il surveille ce fichier-là. On a une option force:true pour lui dire : ne t’arrêtes pas, tu me fais juste des commentaires de ce qui se passe dans la ligne de commande, et c’est tout. Donc pour cela, c’est très bien, ça fonctionne. Qu’est-ce qu’on a besoin de faire ? De le surveiller en temps réel à chaque fois qu’on va faire un enregistrement. Alors pour cela, il existe plusieurs possibilités. Une qui est assez sympa que j’ai retenue, qui est le grunt-contrib-watch, qui est un package qui va nous permettre de surveiller un dossier dès qu’on enregistre, quel que soit les fichiers, quel que soit le type de fichier. Et je vais utiliser également un grunt LiveReload dans un second temps, pas dans le premier temps, qui va me permettre, lui, de recharger la page. Alors, Grunt LiveReload, c’est un peu particulier. On peut l’utiliser de manière seule comme on va le faire là. Mais vous allez voir qu’après, dans d’autres étapes, on peut l’utiliser directement conjointement avec une autre extension connect, qui sera beaucoup plus sympathique, beaucoup plus souple à gérer. Pour automatiser la surveillance de la bonne écriture du code, il suffit de créer une propriété watch. Vous l’appelez comme vous voulez, mais c'est... comme je reviens pas là-dessus, c’est plus clair après par la suite pour retrouver. Et là je vais lui dire : je veux surveiller les scripts. Alors côté script, qu’est-ce que je veux surveiller ? Je veux surveiller files. Et là, dans les files, je vais passer un tableau, et je vais lui dire : tu as un dossier qui s’appelle JavaScript ici, enfin js, et tu me surveilles tous les fichiers .js qu’il contient à l’intérieur, voilà. Et qu’est-ce que tu veux que je fasse à ce moment-là ? Eh bien, tu vas lancer une tâche, donc tasks, au pluriel, et cette tasks, ça peut être une liste d’objets ici, ça sera valide, js, puisque c’est comme ça que nous l’avons appelé ici, cette tâche qui a été enregistrée, qui est la même, va invoquer jshint. Voilà, donc il suffit de faire ça, c’est tout. Et là, à ce moment-là, le script dès que je vais le lancer, va pouvoir exécuter cette tâche-là sur... dès que j’enregistrerais un fichier, dans ce dossier-là. Il me manque deux petites choses. La première c’est de faire un LoadNpmTasks ici, donc juste en dessous je vais pouvoir faire un LoadNpmTasks ici, de contrib-watch. Et puis la seconde chose qui me manque, c’est de pouvoir avoir un enregistrement d’une tâche spécifique, plutôt que validejs. Je pourrais utiliser par exemple watchdev, watch development, et tu invoques watch ici. Alors là, j’enregistre. Il suffit que j’enregistre. Je vais passer sur ma ligne de commande ici. Je n’ai pas besoin pour l’instant du navigateur. J’ai simplement besoin de minimiser mon script ici pour pouvoir voir ce qui se passe au fur et à mesure. Attends, je vais rester de ce côté-là, parfait. Et là ici, je vais faire un grunt watchdev, tout simplement. Je le lance. Donc là il me dit : bah hop, j’ai une petite watchdev not found use force to continue ? Est-ce que je n’aurais pas enregistré ? Voilà, erreur classique. Je n’ai pas enregistré le grunt file. Donc je vais pouvoir relancer directement watchdev. Et là il se met à me surveiller. Il me dit : voilà, j’attends qu’il se passe quelque chose. Alors là je retourne dans mon script. Je vais retourner dans mon fichier JavaScript. En fait, dans n’importe quel fichier JavaScript qui se situerait dans ce dossier, bien entendu. Et ici si je rajoute n’importe quoi, en fait. J’enregistre et il me dit : ce fichier a changé, voilà les erreurs qu’il y a dedans. Alors pour lui, coucou, pour l’instant, la seule chose qui le dérange, c’est qu’il n’y a pas de point-virgule, c’est un mot qui n’existe pas. Il ne complaint pas plus que ça pour l’instant. J’enregistre et il me dit : voilà, ça a été changé. Voilà ce qui se passe, et donc on me fait mes erreurs en temps réel. Alors, ce qui serait bien maintenant, c’est de pouvoir continuer l’observation sur du temps réel au niveau du html par exemple. Alors là, je vais retourner dans la partie de grunt ici. Et dans la grunt, je vais rajouter ici, je vais lui dire : tu me surveilles aussi les pages. Et dans ces pages, ici un objet, dans cet objet les files, toujours pareil. C’est un tableau. Mais pour l’instant, à la limite, si tu n'en as qu’une à me surveiller, ça peut être un string tout court, puisque je n’ai qu’un fichier html ici. Tu vas me surveiller ce fichier html. Voilà, et c’est tout. Sauf que là il ne va pas me faire de LiveReload. Il faudrait qu’il me fasse un petit LiveReload. Alors pour ça, je vais déjà manuellement, et c’est en ça que connect pourra nous aider, on le verra par la suite, manuellement dans mon fichier html, je vais rajouter une page de script ici, qui est en localhost:35729/livereload.js, voilà. Ça on le verra par la suite. Pour l’instant, je vais simplement copier cet url-là, ici. Et j’enregistre mon fichier html. Je vais dans mon fichier grunt, maintenant ici, et dans ce fichier grunt je vais lui dire : mais tu vas travailler avec un larron qui s’appelle livereload. Et pour ça, je vais lui passer des options, et je vais lui dire : dans ces options, ici, tu as livereload, tu me le placeras s’il te plaît à true. C'est-à-dire que je demande à ce que tu recharges la page avec livereload. Là je vais enregistrer. Soyons un peu fou là-dessus. Si je passe par exemple dans mon script des options ici également, je vais repasser un objet, et dans cet objet je vais lui dire : livereload, et pensons, attention virgule puisque c’est un objet juste avant file ici. J’enregistre cet élément ici. Donc en fait, quand je vais appeler watchdev, il va pas appeler watch, il va surveiller les scripts, il a une option de livereload, il le fait, il exécute la task validejs, et pour les pages, il me fait, il surveille, et il me fait un livereload:true. Voilà donc, moi, ça me convient comme ça. Ce que je vais faire, c'est je vais rouvrir le navigateur ici. Et rappelez-vous j’ai collé-copié l’url. Si je fais coller l’url et accéder à livereloadjs, qu’est-ce qu’il me dit ? Il me dit : hop pour l’instant c’est inaccessible. Donc on verra pourquoi c’est inaccessible. Ce que je vais faire ici, je vais arrêter la surveillance. Pour arrêter la surveillance, on fait un CONTRÔLE-C ici, et on valide par Oui ici. Voilà, je vais faire un petit clear pour nettoyer un peu la page et voir un peu du monde ici. Je vais d’abord lancer un watchdev ici, par grunt. Ça ira beaucoup mieux si on le fait par grunt, watchdev ici, je le lance. Il surveille. Je vais lancer, je recharge ma page, voilà. J’ai des citrons et des potimarrons. Si j’invoque maintenant ici ma page html, et au lieu de citron, je vais travailler avec des oignons. Et j’enregistre. Il se passe directement des oignons en temps réel, dès que j’ai enregistré. Il a surveillé, il m’a fait un reload, il m’a chargé la page. Que se passe-t-il si je refais maintenant ici, au lieu de potimarron, je lui demande des citrons dans un fichier JavaScript ? Et j’enregistre. Et là, il me charge les citrons également aussi. Il y a eu un petit temps de recul. Je ne sais pas, parce que j’ai cliqué. On va le refaire ici si vous voulez, je vais mettre des oignons ici. Oignons. Et j’enregistre. Vous voyez qu’en tâche de fond derrière il recharge les oignons, sans souci. Par contre si vous regardez ici dans cette partie-là, il a continué à me valider mon JavaScript en temps réel. Il exécute les deux tâches. Alors pensez à un petit détail quand même, c’est : ne surchargez pas trop de tâches. Ne lui demandez pas à la fois de vous surveiller les css. Soyez modéré avec, et pensez qu’il y a un serveur qui surveille tout ça. Et donc si vous ressentez quelque lenteur au niveau de l’exécution des tâches, pensez quand même à libérer un peu de la ressource au niveau du livereload et du watching.

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 !