Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Workflow JavaScript automatique avec Grunt et Gulp

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

French (Français) translation by Frédéric Arijs (you can also view the original English article)

Lorsque l'on est un nouveau développeur front-end et que l'on commence à maîtriser HTML5, le CSS et JavaScript, l'étape suivante est de commencer à utiliser les outils que la plupart des développeurs utilisent pour tenter de garder la raison dans cet univers complexe. Vous aussi vous méritez d'avoir plus de flexibilité et d'aide pour écrire vos feuille de style CSS en utilisant Less. Vous aussi vous méritez d'optimiser la bande passante en minimisant votre code JS. Vous aussi vous méritez d'avoir la possibilité de vérifier automatiquement que votre code JS est bon en utilisant JSHint.

Vous méritez toutes ces bonnes choses.

Donc vous commencez à prendre tous ces excellents outils en main, lançant de plus en plus de commande dans la console. De temps en temps, vous oubliez de lancer la compilation Less... De temps en temps vous oubliez de lancer JSHint et un bug se retrouve en production...

Et soudain vous vous demandez: n'existe-t-il pas une solution pour automatiser tous ces outils? Comment pouvez-vous créer un workflow répétitif qui vous évitera de faire des erreurs?

Evidemment une solution existe, et deux outils en particulier n'attendent que vous pour commencer: Grunt et Gulp.

En tant que débutant dans l'utilisation de ces outils, vous vous demandez comment ils fonctionnent et lequel choisir, n'est-ce pas? Bien, parfait, vous lisez le bon article!

1. L'exemple que nous allons utiliser

Je vais donner les bases pour utiliser Grunt et Gulp en employant un exemple simple que vous pouvez télécharger sur GitHub.

C'est un simple site web composé de trois fichiers:

list of files indexhtml mainjs and stylesless

Styles.less définit les styles CSS de manière bien plus riche qu'un fichier standard CSS. Ensuite on utilise le compilateur Less pour créer le fichier styles.css. En utilisant Less, on peut, par exemple, utiliser des variables dans le fichier CSS:

variables in the css file

Vous pouvez trouver plus d'informations sur Less dans ce guide de démarrage.

Le code JavaScript et HTML sont vraiment simples. La page doit ressembler à ceci:

Simple HTML web page

2. Comprendre le Node.js Package Manager

Vous devez d'abord comprendre comment le Node.js Package Manager (npm) fonctionne.

Npm est un outil fourni par Node.JS. Il est utilisé pour avoir des outils et des frameworks tout en résolvant automatiquement les dépendances.

Pour utiliser Less et compiler vers un fichier CSS utilisable, vous devez d'abord installer Less en utilisant cette commande:

Note: pour avoir la commande npm, vous devez installer Node.js depuis le site web de Node.

Une fois que c'est fait, vous pouvez utiliser cette commande pour compiler les fichiers .less en .css:

Npm utilise un fichier qu'il créé et place dans le dossier courant: package.json. Ce fichier utilise le format JavaScript Object Notation (JSON) pour permettre à npm de savoir quel outil et version sont installés et quels frameworks sont utilisés par le projet (qui est représenté par le dossier courant).

Ce fichier est important pour Grunt et Gulp également, puisqu'il va contenir la liste de tous les plugins qui ont été télécharger et sont donc utilisables dans votre workflow automatisé.

Pour créer un fichier package.json vide, vous pouvez utiliser la commande npm:

Vous devrez répondre à quelques questions auxquelles vous pouvez répondre avec l'option par défaut, et vous serez prêt à commencer.

Dans ce fichier, vous pouvez avoir deux types de dépendances:

  • Celles nécessaires à l'exécution de votre application web ou votre application Node.js
  • celles nécessaires pour la phase de développement (comme Less) et qui sont utilisés pour compiler ou vérifier votre code

Npm propose de base trois méthodes pour installer les packages:

  • globalement sur votre machine en utilisant l'option -g ou -global
  • localement, pour utilisation uniquement dans le dossier du projet, en n'utilisant aucune option (seulement npm install [outils ou framework])
  • pour développement uniquement, localement dans le dossier du projet en utilisant l'option --save-dev

La troisième option va créer une section devDependencies dans le fichier package.json.

devDependencies section property inside the packagejson file

3. Grunt

Qu'est-ce que Grunt?

Grunt est le pionnier dans le domaine de l'automatisation du workflow JavaScript. Il existe de nombreux utilisateurs connus de Grunt, comme Twitter, jQuery et Mordernizr.

Le principe de base de Grunt est de nous permettre, facilement, d'exécuter des tasks. Une tâche est un ensemble de fichiers de code et de configuration déjà créé pour vous. Vous pouvez ajouter des tâches grâce aux plugins Grunt qu'on installe en utilisant npm. Vous pouvez trouver un plugin pour pratiquement tous les outils que vous pourriez utiliser, comme Less et JSHint.

Pour faire tourner Grunt, vous devez créer un fichier Gruntfile dans lequel vous spécifiez les tâches que vous souhaitez faire tourner et la configuration pour chacune d'elle. Une fois que c'est fait, vous devez simplement lancer la commande grunt à la ligne de commande en spécifiant la tâche à lancer (par défaut ou spécifique) et ce sera fait automatiquement.

Nous allons suivre un guide pas à pas pour mettre en place ce système.

Etape 1. Création du fichier Package.json

Utilisons npm pour initialiser le fichier:

Vous devez répondre à quelques questions comme le nom du projet et quel est le fichier .js par défaut. Vous pouvez aussi choisir de créer le fichier manuellement et mettre son contenu comme suit:

Etape 2. Installer Grunt globalement et localement

Vous avez besoin d'installer Grunt globalement pour avoir la commande et localement pour initialiser ce qui est nécessaire pour chaque projet.

Lancez:

Ensuite installez le localement:

Note: n'oubliez pas l'option -dev pour spécifier que c'est une devDependencies dans le fichier package.json.

Etape 3. Créez le GruntFile.js

Grunt fonctionne avec un fichier nommé gruntFile.js Ce fichier contient tout ce dont Grunt à besoin, c'est à dire:

  • la configuration des tâches
  • les tâches personnalisées
  • le chargement des tâches

Grunt attend du fichier qu'il exporte une seule fonction qui prend un paramètre nommé "grunt". Vous allez utiliser cet objet pour réaliser toutes les actions relatives à Grunt.

Voici un gruntfile minimal qui se contente de lire le contenu du fichier package.json et de créér une tâche default qui ne fait rien.

Note: placez ce fichier dans la racine du dossier, juste à côté du fichier package.json.

Vous pouvez l'exécuter pour être sûr que tout est configuré correctement.

Pour cela, ouvrez une ligne de commande dans le dossier du projet et lancez:

Vous devez voir quelque chose comme ceci:

Done without errors

Etape 4. Ajoutez votre première tâche: JSHint

Maintenant que le Gruntfile est prêt, l'étape suivante est d'ajouter un plugin et de l'utiliser. Tous les plugins peuvent être trouvés dans ce listing sur le site web de Grunt. Une tâche courante que l'on retrouve dans un Gruntfile est de vérifier que la syntaxe JavaScript est correct. Pour faire ça, on utilise généralement JSHint.

Ajoutons le à notre workflow grunt.

Si vous cherchez pour JSHint sur la page des plugins grunt, vous trouverez grunt-contrib-jshint, qui correspond exactement à ce dont on a besoin!

Dans le dossier du projet, lancez:

Quand c'est fini, vous devez l'ajouter à votre Gruntfile.js. Il y a deux étapes simples pour cela:

  1. Charger le plugin.
  2. Configurer la tâche.

Pour charger le plugin, utilisez la fonction loadNpmTasks:

La configuration est faite dans la fonction initConfig où vous devez ajouter une nouvelle propriété à l'objet reçu en paramètre. Cela doit être le nom de la tâche que vous voulez ajouter et qui doit être en relation avec le plugin que vous utilisez. La meilleur façon de connaître le nom et la liste des options disponible est de regarder la documentation du plugin. Vous trouverez toujours un exemple bien documenté.

Pour notre exemple, on veut vérifier tous les fichiers JavaScript à l'exception du gruntfile.js. On veut aussi activer une série de règle pour vérifier les fichiers JavaScript, comme eqeqeq pour s'assurer que le triple égale quand c'est nécessaire.

Voici la fonction initConfig modifiée:

Code for the initConfig function modified

Vous pouvez utiliser votre tâche en lançant la commande suivante (où vous spécifiez le nom de la tâche en paramètre à grunt):

Le résultat doit être:

Done without errors

Vous devez juste lancer cette commande et il va automatiquement relevé toutes les erreurs qu'il pourrait rencontrer.

Félicitations, vous avez une tâche automatisée dans votre workflow grunt!

Etape 5. Ajouter une deuxième tâche: la compilation Less

Votre tâche JSHint fonctionne bien, mais elle est un peu seule dans votre workflow. Généralement, on utilise un outils comme Grunt pour faire tourner plusieurs tâches.

C'est très facile d'en ajouter, il suffit de suivre les même étapes. Disons que vous souhaitez ajouter la compilation de vos fichiers Less au sein de votre processus automatique. Si vous cherchez dans les plugins Grunt, vous trouverez le plugin grunt-contrib-less que vous pouvez installer dans votre projet:

Comme pour la tâche JSHint, il faut ajouter la configuration:

code to add the configuration

Ensuite, charger la tâche:

code to load the task

Vous pouvez maintenant lancer Grunt et spécifiez la tâche less: cela ne lancera que Less. Ceci est très bien, mais vous souhaitez lancer toutes les tâches, non? C'est le rôle de la tâche default.

Quand vous lancez grunt sans spécifier de tâche, il ira chercher la tâche default et lancer les tâches spécifiées dans son tableau. Vous pouvez la modifier pour lancer less et jshint. Notez que pour ajouter un groupe de tâches comme default, vous devez appeler la fonction registerTask:

code to call the registerTask function

A partir de là, lorsque vous lancer grunt, il fera tourner jshint et ensuite less:

Running less task done without errors

Vous pouvez ajouter toutes les tâches que vous voulez, et vous pouvez créer d'autre groupe de tâche comme default et les appeler en passant leur nom comme argument à grunt sur la ligne de commande.

Facile, non?

Etape 5. Utilisé les watch pour ne pas avoir à lancer Grunt manuellement

Maintenant, vous êtes un développeur heureux. Toutes vos tâches répetitives sont automatisées au sein du workflow grunt et vous avez juste à lancer la commande grunt pour qu'elles soient exécutées. Mais cela peut être encore plus facile. Cela peut être fait automatiquement.

Pour cela, vous pouvez ajouter une tâche spécifique nomée watch. Cette tâche va continuellement surveiller votre dossier de travail et, basé sur des règles, quand un fichier est modifié, va lancer une tâche grunt associée.

D'abord, installer watch dans votre projet:

Chargez le comme toutes les autres tâches en utilisant la fonction loadNpmTasks et configurez là. La partie configuration est un peu différente car il faut spécifié une configuration pour chaque tâche qui doit être couverte par le watch.

code to specify a configuration for each task you want to cover using watch

Pour plus d'information, vous pouvez lire la documentation complète pour cette tâche.

Quand vous voulez activé le watch, vous devez seulement lancer la commande suivante:

Et il exécutera les tâches à chaque fois qu'un fichier est changé et que ce fichier répond aux critères spécifique à la tâche.

execute tasks each time a file is changed and this file is in the scope of watched files for the specific task

Et c'est tout! Vous avez maitenant les connaissances nécessaires pour créer un workflow automatisé avec grunt.

4. Gulp

Qu'est-ce que Gulp?

Gulp est une alternative à grunt. Il est un peu plus récent et à la réputation d'être plus flexible que grunt. Avant de choisir lequel vous utiliserez, regardons un peu comment gulp fonctionne.

Gulp est un outil d'automatistion de workflow. Comme grunt, il utilise npm et un fichier package.json. Tous les plugins disponibles vont aussi être télécharger en utilisat npm et seront ajouter à la section devDependencies du fichier package.json.

La plus grande différence, c'est que Gulp utilise des flux. Un flux est un ensemble de fonction par lesquels un fichier va passer et être modifié en mémoire. Le fichier ne sera écrit sur le disque dur seulement à la fin du processus, ce sera donc plus rapide. Les tâches Grunt, à l'opposer, fonctionne comme des tubes et ne peuvent pas être chainées.

Regardons un peu comment fonctionne Gulp en suivant quelques étapes faciles.

Etape 1. Créer le fichier Package.json

Comme pour Grunt, il faut d'abord créer le fichier package.json. Vous pouvez utiliser la même technique que celle utiliée pour l'exemple avec grunt.

Etape 2. Installer Gulp et Gulp-Util globalement et localement

Une fois le fichier package.json créé, installez gulp globalement et localement en utilisant:

et

Cela va installer la commande gulp et tout ce qui est nécessaire pour avoir un workflow gulp.

Il faut ensuite installer gulp utils, qui contient des fonctions communes partagés par les autres plugins:

Finalement, créez le fichier gulp minimal, qui doit ressembler à ceci:

Comme vous le voyez, c'est un peu différent de la syntaxe de grunt. Dans gulp, les plugins sont chargés en utilisant la fonction require comme vous êtes habitués à le faire si vous ête un développeur Node.js. Il y a aussi une tâche default qui est définie dans la fonction gulp.task.

Si vous lancer la commande gulp dans votre terminal dans le dossier du projet, vous devez avoir un résultat similaire à ceci:

result of running the gulp command line using a command prompt

Etape 3. Utiliser votre première tâche: la compilation Less

Pour utiliser un plugin avec gulp, vous utilisez la même fonction que celle utilisée pour créer la tâche default. C'est parce qu'il ne faut pas utilisé un nom spécifique pour créer une tâche. Vous appelez juste gulp.task, mettez le nom que vous voulez, et donnez une fonction JavaScript en second paramètre. Quand gulp lance la tâche, il va exécuter cette fonction.

Pour utiliser un plugin, vous l'appelez avec le nom que vous avez choisis lorsque vous l'avez importé (avec la fonction require). Habituellement, vous l'appelez dans le contexte d'un flux de workflow qui commence généralement par une sélection de fichiers. La sélection est faite avec la fonction gulp.src. Il va sélectionner une série de fichier et retourner un flux qui peut être passé à une autre fonction en utilisant pipe. C'est grâce à cela que vous pouvez enchainer les actions sans avoir besoin d'écrire sur le disque dur. Vous ne faites que passer le flux d'un plugin à un autre.

Voici un exemple basique pour Less:

basic sample for less

D'abord on utilise require ('gulp-less') pour charger le plugin less de gulp. (On l'a installé en utilisant npm install gulp-less --save-dev).

Ensuite gulp.src va sélectionner tous les fichiers .less, nous les envoyons (pipe) ensuite à la fonction less() et finalement ils sont envoyés (pipe) à gulp.dest qui indique où écrire le résultat. Comme gulp.src peut sélectionné plus d'un fichier, gulp.dest renseigne un dossier.

Une fois que le modèle de "pipe" est compris, nous pouvons facilement obtenir le même résultat qu'en utilisant grunt.

La puissance de gulp réside dans la création de tâches personnalisées qui appèlent plusieurs plugins et qui peuvent être associées comme vous le souhaitez.

Note: il existe bien entendu un plugin gulp-watch que vous pouvez utiliser pour lancer automatiquement votre workflow.

Conclusion: lequel choisir?

J'espères que vous avez maintenant une meilleure compréhension de la raison pour laquelle vous avez besoin d'un workflow automatique et comment vous pouvez utiliser Grunt ou Gulp pour l'obtenir.

Le choix de la méthode dépendra essentiellement de la tâche que vous voulez réaliser.

Grunt est facile d'utilisation. Il ne faut pas comprendre le système de 'pipe', et réalisé des tâches simple sera plus aisé. C'est un outil très mature, utilisé par de nombreux éditeurs et développeurs, et il existe de très nombreux plugins.

Cela dit, la façon dont Gulp fonctionne peut vous permettre beaucoup de flexibilité. Il existe depuis un certain maintenant, et même si vous ne trouvez pas autant de plugins que pour Grunt, tous les classiques sont aussi disponible pour Gulp.

Si vous utilisez un workflow très standard avec des étapes courantes comme JSHint, uglifié, validé du CSS, etc., Grunt est un bon choix. Si vous avez des tâches plus compliquées, Gulp sera un bon équipié.

Plus d'information

Plus d'example avec JavaScript

Microsoft propose de nombreuses ressources gratuites sur beaucoup de technologies open source JavaScript, et nous sommes en mission pour en créer bien plus avec Microsoft Edge. En voici quelques uns à regarder:

Et voici quelques outils pour débuter: Visual Studio Code, Azure Trial et des outils pour les tests cross-browser - tous disponibles pour Mac, Linux et Windows.

Cet article fait partie de la série web dev tech de Microsoft. Nous sommes heureux de partager Microsoft Edge et le nouveau moteur de rendu EdgeHTML avec vous. Vous trouverez des machines virtuelles gratuites ou testez à distance sur votre Mac, iOs, Android ou appareil Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.