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

Inclure les périphériques pour la validation

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans vos tests, tenez compte de tout périphérique mobile connecté au réseau. Ainsi, développez tout en vérifiant et en validant le travail en permanence.
06:01

Transcription

On va pouvoir largement améliorer le service, notamment en utilisant grunt-contrib-connect. Alors, on va de suite pointer sur un dossier de travail ici, qui est le 06_07. On va copier cette adresse en tant que texte. On va se rendre directement sur cette adresse-là, et je vous invite à faire un npm install qui contient l’intégralité des packages nécessaires. Ceci fait, ensuite on repasse, on rebascule dans le code. Et là, le code il est classique, c’est celui qu’on a utilisé jusqu’à présent, c'est-à-dire avec un fichier html qui relie une page et qui charge un JavaScript et un css en plus cette fois-ci, qui va pouvoir faire la mise en couleur. On a un watch qui a été installé, et qui regarde, donc qui utilise le livereload, complet ce watch. Et en fait il fait des css, du JavaScript, et des html. Il surveille l’intégralité de ces petits fichiers pour être rechargé. Ce qu’on va faire maintenant, c’est : on va faire appel à unload task, npm task, qui va être contrib-connect, et on va rajouter un objet connect maintenant ici à cette configuration. Et cet objet connect, on va lui passer un objet server ici qui va pouvoir venir être paramétré sur les divers critères qu’on a besoin. Alors, le premier critère en option, ça va être le port. On va utiliser le port 5000. Vous pouvez utiliser le port que vous souhaitez. Par défaut c’est le port 5000 qui est proposé. Ensuite on va utiliser la base. Alors la base, c’est dans le cas où on travaillerait sur ce dossier, mais qu’on voudrait explorer ce dossier. Donc on changerait la base directement de travail. Ici on met un point simple pour dire : non non, on se retrouve sur ce serveur. C’est la racine, c’est très bien. Ensuite on va définir l’host name. L’host name, on pourra aller jusqu’à un dns, mais là on va aller faire un 127.0.0.1 qui est l’adresse par défaut du localhost. Et on va lui demander livereload:true. Alors attention, ce livereload n’est pas le même que celui-ci. Celui-ci dit : chaque fois que tu vas enregistrer un fichier, s’il te plaît tu me le passes, tu recharges la page. Ici, le livereload en fait, va plutôt, lui, se baser sur le fait de dire : je vais rajouter le petit script qui va bien dans la partie html ici. On n’a pas rajouté ce script, vous vous rappelez, le script qui pointait vers le port 35729, et qui chargeait le script livereload.js. Mais là en fait, on n’a pas besoin de l’écrire. C’est ce livereload qui va venir l’écrire. Et dernière option, le open ici va nous dire, open true. Ça veut dire que chaque fois que je vais invoquer connect, à ce moment-là s’il te plaît tu me lances cette connexion dans le navigateur directement. Et là donc on rajoute la tâche connect en tout début avant de faire le watch pour lancer le côté serveur. Voilà, une fois que ça s’est fait, il n’y plus rien à faire. On peut rentrer directement ici et faire un grunt watchdev, ici directement. On lance. Et vous allez voir, le service me dit : je me connecte, et hop vous voyez, il m’a lancé le navigateur automatiquement. Si je lance sur mon navigateur ici, voilà, je vois les deux images, l’image par défaut plus l’image chargée par le JavaScript qui est fait. Alors, si ici maintenant je passe avec un script en plus petit, voilà ici, et que je viens changer dans le html au lieu de citrons, on va refaire le même truc que tout à l’heure, je vais mettre des oignons, voilà, j’enregistre, et automatiquement les oignons se passent. Il n’y a pas de souci, ça fonctionne très bien. Si je vais sur le JavaScript, également ici je vais mettre des citrons. J’enregistre, ça fonctionne également. Si je vais sur le css, je vais dire : je ne veux pas du light gray, mais du gray, ici CONTRÔLE-S. J’enregistre, et voyez que tout change, c’est parfait. Là où c’est un peu moins parfait, on va dire dans ce style de décor ici, c’est si je passe sur un iPad par exemple. Ici si je viens sur le iPad pour, rien ne s’affiche. Mais ce n’est pas grave. Regardez, on va pouvoir rebasculer en plein écran ici, et puis retourner dans le gruntfile. Ici, cette fois-ci, on va demander de reprendre sur l’adresse 0.0.0. Et ici à ce livereload, on va lui demander de ne pas ajouter le script. On va venir l’ajouter, nous, le script. Et pour l’ajouter, ce que je vais faire, c'est :je vais appeler la ligne de commande ici, l’invite de commande, et je vais faire un ipconfig pour pouvoir, pour trouver l’adresse IP. Donc ici je vais avoir un 192.168.0.70. Si vous êtes sous Macintosh, vous pouvez faire pareil depuis le terminal ici. Donc une fois que vous avez l’adresse IP de votre machine, il suffit de venir manuellement rajouter ce script directement dans le fichier html ici. Et donc je vais venir le rajouter dans le html. J’enregistre ici. On repasse dans la ligne de commande. On va faire un CONTRÔLE-C pour quitter ce programme. Et on va relancer un watchdev directement. Donc watchdev se lance. Il me relance mon navigateur. Donc on va revenir prendre le fichier html, voilà, on est ici, parfait. Je reprends mon code ici, sauf que je vais passer en tout petit maintenant ici. Et en étant tout petit, cette fois-ci maintenant je vais demander à mon iPad également de revenir. Et voyez que cette fois-ci l’iPad le voit ici. Alors là j’ai l’iPad ici, ici, j’ai le navigateur. Et là, j’ai mon code. Ici dans mon code, si je reviens, et qu’au lieu des oignons ici, je reprends des citrons. Citronnons, voilà. J’enregistre et vous voyez qu’instantanément entre l’iPad et le navigateur qui est sur la machine, l’iPad là n’est pas du tout sur la machine, il est relié par une connexion wifi à mon ordinateur, et donc vous voyez que ça fonctionne. Si je vais sur le côté du JavaScript j’enregistre, CONTRÔLE-S, vous voyez que ça se passe. Et si je vais du côté du css, et que là maintenant je vais faire un light gray, je reviens sur light gray, j’enregistre, et là, hop, bingo, ça se passe. Donc vous pouvez comme ça en temps réel travailler grâce à une tâche grunt directement en livereload sur l’intégralité de vos fichiers, et surtout sur l’intégralité des devices qui seraient connectés cette fois-ci sur l’adresse IP de votre machine, en local. Vous pouvez continuer à développer, et en temps réel, voir les modifications que vous apportez dans vos fichiers.

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 !