HTML5 : Optimisation des flux de production

Créer une tâche avec Gulp

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Après avoir installé Gulp, demandez-lui d'exécuter et de gérer des tâches à l'aide du fichier gulpfile.js. Puis créez des tâches et découvrez qu'il en existe déjà plusieurs.
04:56

Transcription

Une fois Gulp globalement et localement installé, Nous pourrons commencer à travailler avec lui, Et voir comment on dialogue. Ici on a un package JSON, Dans un dossier numéro 5, Qui est vide, qui contient le nom Et surtout les dépendances à installer. Pour chaque fois vous allez vous placer dans la console, Ici vous allez lancer sur le dossier en question, Vous allez pointer sur le dossier, Vous allez lancer un npm install Pour pouvoir installer toutes les dépendances qui seront nécessaires. Donc on montera progressivement, Il arrivera un moment où on partira directement avec tout installé, Et pour pouvoir transmettre les fichiers sources, Ça vous demandera à vous, D’aller le faire de manière indépendante et manuelle à ce niveau-là. Pour l’instant on continue à tout faire ensemble. Ici donc le package JSON a été installé¸ La main nous est redonnée prête à travailler, On peut utiliser clear directement, On laisse tous les messages qui sont indiqués, Qui nous disent éventuellement des Warnings, Tant qu’il n’y a pas de messages d’erreurs qui seraient écrits en rouge, On va dire qu’on laisse les choses telles quelles pour l’instant. Ici on fait un clear pour nettoyer la console, Et être prêt à travailler. Lorsqu’on va commencer à créer, ça va être, On va créer un nouveau fichier ici qu’on va appeler gulpfile.js et qu’on va enregistrer à la racine de ce dossier. Donc ici je vais enregistrer à la racine du dossier numéro 2, Dans la partie numéro 5, Je vais venir enregistrer un fichier gulpfile directement. Ce fichier est apparu. Et on va pouvoir commencer à venir parler avec Gulp. Première chose, on va créer une variable locale à ce fichier, Qu’on va appeler gulp. On pourrait l’appeler comme on veut, Mais pourquoi ne pas l’appeler gulp ? Puisqu’on va dire, j’ai besoin, Rappelez-vous le commande js sur lequel Node est battu, C'est-à-dire qu’on va invoquer une brique nécessaire qui s’appelle comment ? Qui s’appelle gulp. Et rappelez-vous tout à l’heure dans l’arborescence qu’on avait vu, C’était que gulp, c’est soit une extension, soit un package, Soit un simple fichier JavaScript. Node va savoir comment venir le chercher. Déjà il sait qu’il va venir dans le node_modules ici pour le chercher, Et il va chercher quelque chose qui s’appelle gulp. Il va trouver gulp qui est ici, parfait. Il va le récupérer. Et qu’est-ce qu’il va ouvrir ? Il va ouvrir un fichier qui s’appelle Il va savoir ce qu’il doit faire avec, Il va se débrouiller et va apprendre ce petit univers, Nous à la limite, tout ça Tout ce qui se passe à l’intérieur ici c’est une boîte noire, On n’a pas réellement besoin de comprendre ou savoir ce qui se passe, À moins que cela soit partie de notre travail. Ici sur cet objet gulp que j’ai créé, Donc cette variable-là, Je vais pouvoir lui dire, Je vais t’afficher une tâche à faire, Cette tâche je vais l’appeler vasygulp, Je peux l’appeler comme je veux. Je vais lui donner ce nom sous forme de chaîne de caractères, Et je vais lui dire c’est une fonction, cette tâche, Et cette fonction anonyme ici, Tu vas simplement m’afficher console.log Et tu me diras s’il te plait, Coucou je suis une tâche Voilà, tout simplement. Point, contrôle S Je l’enregistre, Je repasse dans ma ligne de commande, Et maintenant puisque je suis en train de dialoguer. Avec qui je dialogue ? Node ? Non pas du tout. Avec NPM ? Non. Je dialogue avec Gulp. Et rappelez-vous le fameux .cli qui avait été installé, C’est lui qui va me permettre de pouvoir comprendre ce que je dis. Et je vais pouvoir exécuter de manière locale le Gulp qui a été installé. Et là je vais lui dire, je vais appeler vasygulp, Le fameux élément de string que j’ai placé à l’intérieur de ma tâche, Et quand je lui dis ça, Il me dit je commence à utiliser gulpfile Ill y a ce fichier JavaScript qui va m’indiquer ce que je dois faire, Je démarre la tâche qui s’appelle vasygulp, Je fais coucou je suis une tâche, je l’exécute. J’ai terminé d’exécuter cette tâche, Qu’est-ce que je dois faire après ? Rien, tu ne m’a rien dit. Je te redonne la main. C’est tout. C’est pas plus compliqué que ça que de parler avec Gulp. Vous allez me dire que ce qu’on lui a demandé ce n’est pas grand-chose. Mais ici je vais mettre point-virgule, Et je vais créer une autre tâche qui serait un autre gulp. Et je pouvoir comme ça, imbriquer autant de tâches que je veux, Tout simplement en les invoquant depuis Gulp ici, Et je dirais autretache, Et je l’invoque, Il me dit autretache, ce n’est pas défini, Mais oui, c’est autregulp, Vous voyez, tant qu’il n y a pas de rouge, tant qu’il n’y a pas d’erreurs, On ne se préoccupe pas de ce qu’il nous raconte, Vous allez voir une fois qu’on travaille avec ce type de console-là, Donc le Powershell, Ça nous permet vraiment de pouvoir être interpellé quand on en a besoin. Et là il me dit, voilà coucou ici une autre tâche, Et une tâche pourrait elle-même ici à l’intérieur en JavaScript, Appeler une autre tâche, etc. Et donc c’est ce qu’on va voir au fil des étapes que l’on va construire.

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 !