Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

HTML5 : Optimisation des flux de production

Valider les liens

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Un site qui contient des liens brisés ou inexistants devient difficilement utilisable. Vérifiez-en la bonne tenue et mettez en œuvre une tâche dédiée. Apprenez également à la compléter.
09:29

Transcription

Un point primordial dans la gestion d'un site web va être la validation de l'intégralité des liens que l'on va utiliser : qu'il s'agisse d'ancre tout simplement, qu'il s'agisse de fichier interne, de fichier externe, de fichier qui n'existe pas ou de fichier en localhost par exemple, il est important de pouvoir les renifler, et savoir si tous les liens sont valides et ne vont pas mettre en péril la bonne utilisation du site. Donc pour ça, on va utiliser encore une fois un plug-in, et là, je vous invite donc à se rapprocher de grunt avec grunt-check-pages qui va valider l'intégralité des liens. Je ne vais pas refaire systématiquement tous ces trucs-là, là, vous avez compris maintenant que si on va sur la page npm.js, on va pouvoir installer le module, on va pouvoir le lancer, on a toujours les parties de base qui vont nous permettre de le travailler, donc je vous invite à vous rapprocher du npm.js pour travailler dessus, et nous, on va se focaliser sur comment pousser un peu plus loin l'ensemble des plug-ins et pas perdre du temps à re-regarder la doc. Ici, si je regarde dans mon projet, on a d'une part un Gruntfile, et un package.json qui sont prêts à l'emploi. Première chose qu'on va faire c'est, on va se rendre sur la console de commande, on va aller sur le dossier en question, et on va faire un npm install, on va lancer cette installation globale, on va la laisser faire en arrière-boutique, et nous, on va retourner maintenant travailler sur le document Gruntfile. Alors quand je vous disais qu'il était terminé, c'est : il est en partie terminé avec toutes les options on va dire par défaut que l'on pourrait être mené à utiliser sauf que la page URL n'est pas indiquée. Pour indiquer une page URL, qu'est-ce que j'ai fait ? Ici, j'ai lancé sur un site web local directement l'intégralité de cette page pour pouvoir la tester. Alors bien sûr, si je devais tester plusieurs pages, il faudrait que je puisse avoir plusieurs pages lancées sur le localhost, pour pouvoir les utiliser sur cette adresse. Alors retournons ici dans notre partie et au niveau de l'URL, je vais simplement pointer vers cet URL, un localhost. J'enregistre mon document, et puis je m'aperçois que donc si j'appelle watchdev, surveille le développement ici, je vais appeler checkPages, sauf que checkPages ici c'est dans la partie développement qu'il me faut aller parce qu'on pourrait avoir une partie production, et donc, je vais devoir rajouter development en anglais. Voilà, tout simplement pour pouvoir attraper le bon indice. Si je retourne dans ma console, d'ici là tout a dû s'installer voilà, tout est installé, et donc là, si je me fais un grunt ici watchdev, on va me donner l'intégralité des pages. Et on me dit : ah, aborted due to warning, il me dit : tu cherches 1 page, 5 liens, il y a 9 issues qui ont été trouvées, toutes les issues sont là, et il me dit : mais attention, tu as des liens inexistants, donc c'est-à-dire que toutes ces erreurs m'ont créé un arrêt forcé. Si je regarde maintenant du côté de l'arborescence ici, je n'ai aucune information qui a été apportée, uniquement la console qui peut me lister toutes les erreurs mais je n'ai pas de log qui a été généré, et de plus, il a fallu que j'interpelle directement un localhost ici pour pouvoir travailler sur mon document et donc ça, ce n'est pas forcément sympa à ce niveau-là. Alors, deux choses : la première, ça va être d'installer un LogFile, et la deuxième, ça va être d'installer un serveur rapide. Alors, on reviendra sur cette notion de serveur plus tard dans une étape dédiée mais déjà, on va commencer à travailler avec. Pour cela, il suffit de travailler avec le grunt-contrib-connect qui va me permettre de moyennant cette installation pour pouvoir accéder à un serveur local ici, sans avoir de serveur à installer et qui pourra même cohabiter avec des serveurs déjà existants puisque vous avez vu que j'ai un localhost et ça va pas gêner du tout, ça va pouvoir travailler et puis la deuxième, ça va être un logfile-grunt qui lui va me permettre de générer un fichier log pour pouvoir contenir l'intégralité des modifications ou des retours sur liens que je vais avoir. Je n'ai plus qu'à retourner dans mon Gruntfile ici, il y a pas besoin de les installer puisque si vous avez fait un npm install, tout était prévu déjà à l'origine. Ici, on a simplement besoin de venir compléter ce fichier. Ce qu'on va faire dans un premier temps, c'est : on va utiliser une variable qu'on va appeler option log, pour pouvoir placer toutes les options nécessaires à notre fichier log, et on va la mettre sous forme d'objet littéral ici que l'on va pouvoir créer. Alors je vais venir copier ça, ça sera plus rapidement fait après par la suite. Je vais définir le filePath ici, le chemin d'accès de ce log, je lui dis : tu vas te placer si tu veux à un logs, tu me créeras un dossier s'il n'existe pas et tu me mets un grunt.log, tu pourrais l'appeler également Link ou Feedback Link, peu importe, utilisez le nom que vous voulez pour pouvoir générer ce fichier de log. Ensuite, on va lui demander ici maintenant de faire un clearLogFile, c'est une option très importante ici, je vais la mettre à true, je vais lui dire : à chaque fois que tu me génères un rapport tu effaces l'ancien rapport. On pourrait cumuler les rapports comme ça, c'est-à-dire continuer à implémenter notre fichier de rapport. Là, je lui dis : non, tu me réinitialises le rapport et puis surtout, ce qu'il ne faut pas oublier ici c'est de faire un require, on ne va pas le faire au travers d'un loadnpmTasks , on va le faire au travers d'un require, et on va lui dire si logfile-grunt et à ce niveau-là, on va passer deux paramètres sous forme d'une autre auto-appel d'exécution, auto-exécution avec grunt et ici, on va pouvoir coller notre option log, ici. Donc ici, on sait qu'on va pouvoir générer notre log. Il n'y a plus rien à faire à ce niveau-là, si ce n'est de faire un loadTasks dans la partie basse pour lui demander de récupérer le logfile-grunt pour pouvoir l'exploiter. Maintenant, on va se regarder du côté de la partie du connect. Alors, ici sur la partie connect, on va rajouter une fonction directement à notre élément donc ici, on va lui demander cette fois-ci de faire un connect, et ce connect, on va le décrire au travers d'un objet, et cet objet, alors, je passe très vite là-dessus, on verra tout ça en détail dans une étape qui est dédiée à la mise en place de serveurs en utilisant node directement, d'autres on verra, il y a plein d'alternatives à utiliser, ici je vais passer comme option deux choses qui sont importantes : le port ici sur lequel je veux travailler. Donc je vais travailler sur le port 5000 pour éviter justement des contrariétés avec un éventuel serveur qui travaillerait en 80 par exemple, et ici le hostname, je vais quand même le garder sous forme de local, donc je vais utiliser la même adresse, c'est-à-dire la 127.0.0.1, adresse par défaut. Petit détail, c'est que il va me falloir récupérer le loadtasks au niveau du contrib-connect, et deuxième élément c'est que par défaut ici, le watchdev va exécuter checkPages development mais avant d'exécuter checkPages, il va devoir invoquer connect, c'est-à-dire connecter la page pour pouvoir aller la tester, et cette page justement, comme je la teste en 127.0.0 sur le port 5000, je n'ai pas besoin de recopier toute cette partie-là, j'ai juste besoin de lui dire : je vais attaquer le 127.0.0.1:5000, c'est tout ce que j'ai à faire pour pouvoir venir interroger cet élément-là. Donc si maintenant, je repasse dans ma console à ce niveau-là, je ré-invoque la même commande, alors tenez, ce que je vais faire, c'est : je vais faire un petit clear, histoire d'y voir plus clair, et donc ici, si j'appelle le watchdev maintenant, on a exactement la même chose qui se passe sauf qu'on a en plus un logfile qui a été généré. Alors, il me dit qu'il y a une petite erreur puisque le logfile n'a pas été installé, je vérifie de ce côté-là, si, si, on a bien le logfile et puis n'importe comment, on a bien le log qui a été généré ici au niveau du gruntlog. Donc ici, si on ouvre, alors je vais actualiser ma page ici, F9, notre fichier est bien présent, et si je l'ouvre, il me dit : on s'est bien connecté au serveur, on a checké la page et on se trouve, et donc il me dit : il y a un fragment qui est vide à tel endroit, on a un local link etc., et donc ça va me donner toutes les informations qui ne sont pas bonnes, toutes les informations qui seraient fausses ou tous les éléments qui seraient en erreur. Donc ici, on a les Local link parce que si je regarde du côté du Gruntfile ici, au niveau du Local link, j'ai dis true, si je passes false au niveau du noLocalLinks ici, que je relance ma vérification, si je vérifie du côté du grunt.log ici, cette fois ci on voit bien qu'on n'a plus qu'on n'a plus les noLocalLinks puisqu'ils ont étés évités, par contre ici, on a un Empty fragment, on a un Bad link, lien qui est inexistant parce qu'il pointe à ce niveau-là, on a un mauvais lien parce qu'il est en interne, on a dit : on ne veut pas de lien en interne, et ici, on a une erreur parce que ce fichier externe n'existe pas. Donc on a la possibilité de pouvoir tester comme ça en utilisant un vérificateur de lien, en l'adjoignant à un serveur local, lancé à la volée juste pour pouvoir tester nos pages, et en rajoutant un module de log qui va nous permettre de pouvoir enregistrer tout ça dans un fichier log pour pouvoir travailler beaucoup plus sereinement.

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 !