HTML5 : Optimisation des flux de production

Créer une tâche avec Grunt

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Lors de la mise en place du fichier pilote gruntfile.js, faites le tour des diverses possibilités d'exploitation. Étudiez également l'emploi des données de configuration qui seront utiles dans plusieurs cas.
07:57

Transcription

Créons maintenant une tâche, Et voyons comment on peut dialoguer avec Grunt. Assurez-vous d’avoir bien lancé votre ligne de commande Sur le pointage du dossier en question, D’avoir couru l’instruction npm install Afin de pouvoir installer tous les modules en fonction de ce package JSON. Et là maintenant on va créer directement depuis n’importe quel éditeur de code ici, Un nouveau fichier. Et cette fois-ci au lieu de l’appeler gulpfile, Nous allons l’appeler Gruntfile La petite différence juste sur ce Gruntfile quand même, C’est que nous allons devoir utiliser une majuscule sur le « G » de Grunt Au lieu de rester tout en minuscules comme ça avait été le cas pour gulpfile. Ici ce Gruntfile va être exécuté. Et on va devoir à la différence de Gulp, inclure l’intégralité de nos instructions Au sein d’une exportation d’un module. Alors ici on va créer un objet qui s’appelle module Et on va récupérer cet export, On va exporter l’intégralité de ce qu’on va décrire Pour être accessible par Node. Et donc on va placer une fonction Qui va recevoir l’intégralité de cet objet. Au sein de cette fonction, On va quand même passer une variable que l’on va appeler grunt, On peut l’appeler comme on veut, Mais c’est beaucoup plus simple après de se repérer là-dessus, Chaque fois qu’on aura besoin de discuter Avec cette variable qui va être passée par Node, On pourra savoir qu’il s’agit de Grunt. Et notamment on va pouvoir venir enregistrer Une tâche ici au niveau de cet objet grunt qui est passé. Et donc on va faire un Et dans cette fonction, on va passer trois paramètres, Le premier paramètre va être le nom de la tâche que l’on va venir invoquer. Le deuxième paramètre sous forme de string, Qui est facultatif, va être une description de cette tâche, On pourrait l’appeler Et puis on va invoquer une fonction, Soit une fonction anonyme à intégrer, Soit un appel de fonction externe ici, Qui va contenir la tâche à réaliser. Et ici on pourrait dire par exemple, Console.log (« Première tâche ») On enregistre ça. On va se retourner maintenant dans notre console de commande ici, Et cette fois-ci, on va ni invoquer Node, NPM, Gulp. Ici, cette fois-ci on va invoquer Grunt directement. Et on va faire grunt tache1 On va invoquer cette tâche. Et là une fois que Node va invoquer la tâche, On voit qu’il exécute cette tache1 ici, Il nous donne la description, première tâche Et il nous dit Done. La première description attention, Ce n’est pas cette description ici puisqu’il y a un « P » majuscule C’est bien ce qui est affiché ici par cet élément-là. On peut aller un peu plus loin que ça, En créant une seconde tâche, Qui cette fois-ci sera appelée tache2, Aura une description comme Seconde tâche Et comme fonction native, cette fois-ci, On va dire qu’on va recevoir des arguments, Éventuellement à cette fonction d’appel. Donc ici on va créer une variable arg qui représentera nos arguments, Qui sera initialisée à une chaîne vide. On va pouvoir ensuite vérifier si on a reçu un argument. On va dire if on a des arguments, Rappelez-vous en JavaScript, l’objet arguments Qui est un objet passé par toutes fonctions, Dès l’instant où on a un appel qui est fait. On lui dit s’il y a une longueur d’arguments, À ce moment-là arg va être égal à On va mettre un retour à la ligne On va lui dire après ce retour à la ligne, On va faire une boucle qui va pouvoir compter tous les arguments. Et on va faire une première variable, « i » d’incrémentation i=0 Une variable nb maintenant qui elle va compter le nombre d’arguments length Pour éviter de le compter à chaque fois ici. On va maintenant dire, tu vas faire ça tant que « i » sera inférieur à « nb » Et un petit « i++ » derrière. Qu’est-ce qu’on va faire ? On va venir concaténer à cet argument Qu’on a créé dans cette première partie-là, Avec cette variable « a » ce n'est pas un argument ici. On va venir concaténer une tabulation, + arguments [i] Le fameux argument en question que l’on prendra, À tour de rôle, le premier, le deuxième, le troisième, etc. Plus un retour charriot ici, On va rajouter un else ici pour être sûr Que dans le cas où il n’y ait pas d’argument, Et bien on mettrait pas d’argument ici. Il n’y a pas d’arguments dans cette chaîne ici, Et puis on va faire un console.log seconde tâche Et on invoquera l’argument. Donc le retour chariot pour pouvoir passer après la seconde tâche. Ici je vais juste rajouter un petit espace, Pour ne pas coller le Pas d’arguments Ce qui fait que si je reviens dans ma console de commande maintenant, Et que je fais un grunt et cette fois-ci tache2 On va me dire il y a seconde tâche Pas d’arguments Mais si je fais un grunt tache2, « : » pour passer l’argument, Et je l’appellerai « Un » ici, « : » , « Deux » Je passe deux arguments séparés par des deux points. Si je valide, à ce moment-là on me dit, Je courre la tâche numéro 2, seconde tâche Premier argument, « Un » deuxième argument, « Deux » Donc on peut comme ça avoir des arguments Et avoir différentes fonctionnalités au sein d’un appel. On peut maintenant aussi créer des tâches Qui utiliseront des tâches déjà existantes. Ça c’est très important. Et on peut faire exactement pareil bien entendu avec Gulp. Alors ici qu’est-ce qu’on va faire ? On va créer un registerTask, On va l’appeler tache12, concaténée, donc la tâche 1 et la tâche 2. Et cette fois-ci on ne va pas utiliser de description, On va directement utiliser non plus une fonction, On va utiliser un tableau, un arrêt, Et dans cet arrêt on va dire j’exécute la tâche numéro 1, Virgule, j’exécute la tâche numéro 2. Et comme la tâche numéro 2 peut avoir un paramètre, Je vais pouvoir aussi faire tâche 2 globale. Je vais invoquer globale. J’enregistre cette partie-là, je repasse dans la console, Et si maintenant je fais un grunt tache12 Ici directement. Je vais exécuter la première tâche Puis la seconde tâche avec le paramètre globale qui sera passé. On a encore une autre dernière possibilité. C’est de pouvoir comme dans bien des cas, Initialiser notre fonction, Avant le démarrage et l’appel de cette tâche. Ici on va créer une troisième tâche, registerTask appelée tache3 On va lui donner une description de Troisième tâche, Et puis on va appeler une fonction native qui va être exécutée. Mais avant d’exécuter cette fonction native, On va exploiter une autre propriété de cet objet Grunt, Qui sera le initConfig Qui va être invoqué dès que la tâche sera appelée. Le initConfig va être appelé et on va lui dire c’est un objet, Et dans cet objet on va avoir une fameuse tâche 3 Qui correspond à cette Et cette tache3 contient elle-même un objet, De différentes propriétés valeurs, que l’on va pouvoir définir. Et ici je pourrais créer une valeur, Qui serait une propriété donc, Qui contiendrait la chaîne de caractères coucou depuis la configuration. Et maintenant depuis ma tâche, Je vais pouvoir invoquer chacune de ces valeurs De configuration ici. Je vais créer une variable datas Dans laquelle je vais venir stocker la récupération de grunt configuration, Cette propriété config qui permet de récupérer les différentes valeurs, Et je vais faire au travers d’un get ou set, Ça parle de lui-même, c’est très intuitif. Un get quoi ? Et bien je vais « get-er » tout ce qui correspond à tache3. Par contre dans ce tache3, au moment de l’afficher, Je vais aller extraire dans mon console.log De Datas donc de cette partie-là, La propriété valeur ici que je veux exploiter. Donc je vais pouvoir enregistrer et basculer dans ma ligne de commande. Et cette fois-ci, invoquer grunt tache3 Et là on va pouvoir récupérer Qui sera donc récupérée, qui sera lue depuis cette configuration-là. Voilà donc une étape un peu plus compliquée, Un peu plus complète que les autres, Mais qui montre qu’on va pouvoir commencer à accélérer ça maintenant. Écrire du JavaScript Mais en faisant appel à des tâches déjà écrites par d’autres développeurs.

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 !