Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Node.js

Découvrir l'outil Grunt

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grunt est un lanceur de tâches. Il permet la mise en place des automatismes en utilisant des paquets. Penchez-vous sur les notions de base de cet outil indispensable.
07:12

Transcription

Alors là encore évidemment, c'est pas une formation sur grunt mais je vais quand même vous montrer un petit peu l'outil parce que c'est génial. Grunt, c'est absolument incroyable comme outil. On va aller voir sur le site de gruntjs. Alors, vous allez voir, grunt est un automatiseur, c'est un task runner, donc ça permet en fait de faire tourner des tâches et généralement ces superbes tâches vont vous permettre d'aller très vite. Concrètement, comment ça va fonctionner ? On va juste le lancer, on va configurer un fichier qui va nous permettre de travailler grunt, on appelera ça un gruntfile, et à partir de ce gruntfile-là, vous allez référencer des tâches, et vous trouverez tout un tas de choses sur Internet pour vous aider à les écrire. Alors, il y a pleins de plugins qui existent, ces plugins généralement s'appellent contrib- quelque chose. Alors il y en a qui permettent de faire du clean de code, il y en a qui permet de faire de la copie, il y en a qui permettent de faire de l'uglify sur du JavaScript, c'est-à-dire donc de le rendre illisible, il y en a qui permettent de faire des validations avec jshint, alors voilà, il y a énormément de choses, compression css, etc., c'est immense, il y a énormément de tâches, alors voyez, la page est extrêmement longue, donc tout ça, bien évidemment à chaque fois, il va falloir réussir à l'intégrer. Alors nous, on va utiliser le contrib-jshint pour que vous puissiez démarrer convenablement avec grunt, et bien sûr, je vais vous montrer comment on utilise grunt dans un projet. Alors, c'est assez simple en fait en réalité. D'abord dans un premier temps, on va installer npm i, le grunt, et on va le mettre ici en local. Alors grunt, ça se met en local, grunt-cli vous verrez en fait, c'est la ligne de commande. Elle, elle se met en global. Donc là, on va faire un -g sur grunt-cli et c'est les deux seules choses que vous devrez avoir sur la machine pour pouvoir utiliser grunt, Alors vous pensez à utiliser et à installer les deux : grunt-cli et grunt. Quand vous aurez installé grunt-cli, vous aurez accès directement à la ligne de commande de grunt, et là, il va vous crier dessus parce qu'il va vous dire que vous avez pas créé de gruntfile. Bon oui, c'est vrai, on n'a pas créé de gruntfile. Alors comment ça fonctionne ? On va créer un gruntfile ici, à la racine de notre projet et vous allez respecter exactement le nom de fichier comme ça : GruntFile avec un G majuscule, un F majuscule, .js, vous l'enregistrez et voilà comment ça va marcher maintenant à l'intérieur. Ça va être un module.exports. Ah, ça vous rappelle quelque chose ça. Donc en fait, c'est du node.js ni plus ni moins. Ensuite, on va avoir une fonction qui va prendre grunt parce que grunt va s'occuper de l'injecter à l'intérieur. Et puis, on va ensuite à l'intérieur de ce exports venir travailler les différentes commandes que l'on veut utiliser. Alors, à chaque fois ce sera à peu près la même chose, on fera un grunt, on fera un initConfig comme ça, et on viendra à l'intérieur de ce initConfig référencer un objet qui donnera les configurations de chacun de nos modules au fur et à mesure. Alors pour nous, on va en faire juste un tout petit ensemble, on va utiliser jshint. Alors, ne vous inquiétez pas. On va y aller au fur et à mesure, déjà on va le remplir et ensuite on l'utilisera. On va lui donner à jshint des files. Alors à chaque fois, vous n'hésitez pas à aller regarder la documentation parce qu'évidemment, tout est expliqué à l'intérieur, on vous dit ce que vous pouvez utiliser et comment ça s'utilise etc. etc. donc là, il y a pleins d'options, à chaque fois à utiliser. Nous, on pourrait simplement référencer une toute petite commande, donc je vais le faire avec vous, directement ce sera plus simple, mais vous pourrez regarder la note pour aller plus loin. Par exemple, on pourrait lui dire de me trouver tous les .js qui se trouvent à la racine et puis de faire un jshint dessus donc de vérifier qu'il n'y a pas de problème de syntaxe. Ensuite, on pourrait lui donner ici des options. Alors, vous verrez que les options vont à chaque fois dépendre du module que vous allez utiliser. Ici, on va lui mettre esnext, donc pour lui dire qu'on veut utiliser les dernières versions d'EcmaScript, et on va lui donner, si on veut, après, des globales mais on n'est pas obligé, donc on va le laisser comme ça. Nous, ce sera largement suffisant, pour le moment, pour notre exemple. Alors, quand vous avez initialisé la configuration, il va falloir ensuite utiliser grunt et lui demander de faire un loadNpmTasks, avec un s. Alors attention, c'est « grunt. » : grunt.loadNpm, attention, Tasks avec un s, et à l'intérieur de ça, on va lui demander de faire un chargement d'un paquet particulier. Nous on va utiliser grunt-contrib-jshint. Alors, pourquoi j'utilise grunt-contrib-jshint ? Tout simplement parce que c'est la configuration que j'ai ajoutée ici. Donc, le paquet que vous chargez ici, il faut lui donner de la configuration à cet endroit-là sinon ça ne marchera pas. Et ensuite on va obligatoirement avoir à référencer ici une tâche, donc on va faire un registerTask comme ça, et on va lui dire que notre tâche par défaut, donc ça c'est ce que vous ferez de façon classique, ce sera la tâche jshint comme ça. Donc quand vous allez lancer grunt, il va aller chercher jshint. Alors attention parce que quand vous utilisez un paquet, il faut obligatoirement l'installer sinon ça ne marchera pas et vous ne pourrez pas utiliser la tâche que vous avez écrite, il faut installer le paquet que vous souhaitez utiliser. Donc là, je vais revenir rapidement sur grunt pour vous montrer qu'effectivement il existe pleins de paquets. À chaque fois que vous en utilisez un, vous l'installez, puis vous regardez la configuration, vous le configurez comme vous en avez envie. vous avez des petits exemples à chaque fois mais en plus de ça, vous trouverez énormément de choses sur Internet. Il y a, bien sûr, des fichiers déjà prêts que vous pouvez réutiliser, des templates en fait que vous pouvez réutiliser pour grunt. Alors maintenant que vous avez fait ça, il suffit de lancer grunt, vous allez voir que ça va se lancer et là, il ne va pas être content par exemple sur, vous voyez, le questionHandler, là il nous dit que ça, c'est pas possible, on n'a pas le droit de l'utiliser comme ça, donc là, c'est des possibilités, c'est-à-dire qu'on vous crie dessus quand il va manquer des choses, quand vous avez mal écrit, quand vous n'avez pas fait ce qu'il faut, donc c'est bien parce que vous pourrez aller par exemple regarder à l'intérieur et puis, pourquoi pas corriger, parce que vous avez certainement une erreur quelque part, donc il ne faut pas hésiter à aller corriger un petit peu, vous regarderez effectivement. Là il vous dit que this.questions vous ne pouvez pas l'utiliser si vous ne mettez pas directement quelque chose. Donc là, on est obligé de le définir. Si on ne lui attribue rien, il n'en veut pas, ce n'est pas autorisé, on n'a pas le droit de faire ça comme ça. On peut relancer ensuite la commande, et là on va se retrouver effectivement avec, à la ligne 14, il nous dit qu'il manque un point virgule, il manque un point virgule à la ligne 20, il manque un point virgule à ligne 24, il manque un point virgule à ligne 40. On enregistre et ensuite on relance, et là, c'est bon, tout est ok, vous avez validé votre code JavaScript. Alors, c'est une des possibilités de grunt, il y en a des centaines. Je vous propose et je vous conseille surtout d'aller regarder sur Internet les différents templates, vous trouverez des templates grunt qui existent, vous pourrez aller regarder, il y a pleins pleins pleins de templates, il y en a sur GitHub aussi, qui sont très sympas, qui vous permettent de travailler. Voilà des templates classiques grunt, avec pleins d'options, pleins d'explications. N'hésitez pas à faire un tour là-dessus. Grunt est un super outil qui va vous permettre de faire tourner d'autres outils aussi en ligne de commande. Donc utilisez-le vraiment beaucoup, vous pouvez tout faire avec, c'est un vrai bon outil.

L'essentiel de Node.js

Exploitez les possibilités de Node.js et créez des applications côté serveur entièrement en JavaScript. Travaillez avec des requêtes web, gérez le protocole WebSocket, etc.

4h00 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Node.js Node.js 7.0
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 !