Si vous avez déjà travaillé avec du code, vous avez entendu la phrase « Keep it DRY » (« Ne vous répétez pas »). En d’autres termes, si vous devez effectuer une tâche à plusieurs reprises, trouvez un moyen de le faire plus efficacement – ce qui signifie généralement moins de code.

Lorsque nous commençons à développer un nouveau projet, nous nous retrouvons souvent à répéter les mêmes choses encore et encore – des choses comme l’optimisation des images, la réduction du code et la compilation de fichiers. Dans certains cas, nous nous répétions plusieurs fois par minute. Le coût en temps de ces tâches s’additionne rapidement lorsque nous apportons des modifications ou créons de nouveaux fichiers.

C’est terriblement inefficace. Sans oublier que cela ajoute de l’usure sur nos doigts et nos touches du clavier. Les coureurs de tâches sont là pour vous aider!

Qu’est-ce qu’un coureur de tâches ?

Les coureurs de tâches font littéralement exactement cela – ils exécutent des tâches. Les codeurs peuvent spécifier les tâches qu’ils souhaitent qu’un coureur de tâches effectue, et il fera tout le travail pour eux.

Avant les coureurs de tâches, si vous vouliez compiler Sass, exécuter Autoprefixer, puis réduire le CSS résultant chaque fois que vous avez apporté une modification, vous auriez été obligé de terminer chaque tâche séparément. Naturellement, cela deviendrait très vite ennuyeux. Sans oublier que vous perdrez énormément de temps à vous répéter. Pas marrant.

Avec un coureur de tâches, vous pouvez spécifier les tâches que vous souhaitez effectuer, l’exécuter une fois et il fera tout le travail pour vous. Gagnez du temps, économisez de l’argent et sauvez le monde (peut-être?).

Il y a un tas de coureurs de tâches là-bas: Brunch.js, Gorgée.js, Brocoli.js, Gâteau.js, et Grognement.js, pour n’en nommer que quelques-uns construits en Javascript. Oui, leurs noms ressemblent à quelque chose que vous feriez pendant votre anniversaire (sauf le brocoli, cela ressemble à un triste anniversaire), mais vous pouvez les utiliser toute l’année!

Notre coureur de tâche de choix est Grunt.js

Notre coureur de tâches de choix

Nous avons choisi d’utiliser Grunt.js. C’est le coureur de tâches le plus pris en charge et le plus populaire sur le marché. Cela fonctionne en lisant un fichier Grunt qui contient la configuration de votre tâche dans un objet Javascript. Ensuite, vous exécutez une commande dans votre terminal pour spécifier la tâche que vous souhaitez exécuter. Peasy facile.

Votre Gruntfile peut être aussi simple ou robuste que vous le souhaitez, en fonction des tâches que vous exécutez.

Les fichiers Grunt typiques effectuent les tâches suivantes:

CSS

  • Compiler Sass en CSS
  • Exécutez Autoprefixer sur le nouveau CSS pour attraper les préfixes du fournisseur que nous avons peut-être manqués
  • Réduisez le CSS préfixé
  • Mettez à jour notre bannière CSS avec de nouvelles informations d’horodatage

Javascript

  • Vérifiez notre Javascript pour les erreurs
  • Concaténez les autres scripts inclus dans un seul fichier
  • Vérifiez à nouveau les erreurs
  • Réduisez les scripts

Images

  • Optimisez n’importe quel JPG, GIF ou PNG pour créer le fichier taille plus petite

Autres utilitaires

  • Surveillez les fichiers pour les modifications et réexécutez les tâches au besoin
  • Exécutez BrowserSync pour les tester dans plusieurs navigateurs et périphériques à la fois

Vous pouvez imaginer à quel point il serait douloureux d’exécuter ces tâches manuellement. Tout ce que nous avons à faire est d’exécuter une commande simple:

$ grunt

Comme par magie, cette commande unique exécute toutes nos tâches et nous évite de nous répéter.

Pour plus d’informations sur Grunt.js, consultez leur documentation et commencez à regarder les fichiers Grunt.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.