Contenu
Les exécuteurs de tâches JavaScript tels que Grunt sont devenus extrêmement populaires auprès des développeurs frontaux. C'est parce qu'ils aident à faire la seule chose que nous voulons tous faire dans notre travail: gagner du temps!
Mais avec plus de 5 000 (et plus) plugins Grunt désormais disponibles, il peut être difficile pour les développeurs de trouver ces «diamants bruts». Nous avons jeté un regard en arrière sur le moment où nous nous sommes retrouvés coincés dans Grunt pour trouver la recette parfaite des plugins Grunt que vous devriez utiliser.
01. Uglify
Chaque développeur front-end digne de ce nom connaît les avantages de la réduction des fichiers JavaScript, et c'est exactement ce que fait ce plugin. Telle est sa popularité, il est en fait inclus dans le Guide de démarrage de Grunt. Malgré son nom, ce plugin peut également être utilisé pour embellir votre code JavaScript - bien que ce ne soit pas particulièrement utile pour une utilisation en production.
02. Sass
Il peut y avoir un débat sur le pré-processeur CSS qui régit vraiment, mais ici, chez Stickyeyes, nous avons choisi Sass plutôt que son principal rival, Less. Ce plug-in nous permet d'écrire nos fichiers Sass et de les compiler automatiquement en CSS. Les avantages d’utiliser un préprocesseur CSS justifient un article distinct en soi, mais il est prudent de dire que si vous n’en utilisez pas déjà, vous êtes très en retard à la fête!
03. CSSMin
Ce plugin est l'équivalent CSS d'Uglify. Il obtient simplement tous les fichiers CSS spécifiés et les minimise. Bien sûr, si vous comptez l'utiliser en conjonction avec le plugin Sass, vous devez vous assurer que cette tâche est exécutée après la tâche Sass.
Il existe de nombreuses alternatives à CSSMin qui peuvent également réduire la taille de vos fichiers CSS en utilisant des techniques légèrement différentes; CSS nano, CSS wring, CSS shrink, etc. Lisez ce test pratique si vous êtes dans ce genre de choses.
04. Concat
Comme son nom l'indique, ce plugin prend simplement plusieurs fichiers et les concatène en un seul. Comme pour la réduction du code, la concaténation de fichiers est également une bonne pratique séculaire pour réduire les temps de chargement des pages.
La concaténation de fichiers doit toujours être utilisée en production pour JavaScript et CSS. Il s'agit généralement de la dernière tâche à exécuter - après la tâche de prétraitement CSS et la tâche de minification. Il est facile de simplement dire à ce plugin de concaténer tous les fichiers dans un répertoire spécifique, mais méfiez-vous de l'ordre dans lequel les fichiers seront concaténés - vous devrez peut-être donner un ordre spécifique ou nommer les fichiers afin qu'ils soient toujours concaténés dans l'ordre souhaité .
05. ImageMin
Dans la même veine que CSSMin et Uglify, ImageMin s'attaque à un autre problème séculaire de chargement de page: la taille du fichier image. La «minification» de l’image est généralement un premier appel pour l’optimisation, ce plugin est donc essentiel pour réduire autant que possible la taille totale du fichier de page.
Si vous travaillez avec JPG, PNG, GIF ou SVG (un format d'image vectorielle de plus en plus populaire), ce plugin permettra de réduire sans perte la taille du fichier de vos images, sans que vous ayez à lever le petit doigt. Si vous avez beaucoup d'images dans votre projet, il est conseillé d'exécuter cette tâche uniquement lorsque vous passez à la production, plutôt que d'exécuter cette tâche sur un événement de surveillance (voir le point suivant).
06. Regarder
Ce plugin n'affecte pas réellement le front-end de votre site Web, mais il est extrêmement utile pour créer un processus Grunt efficace. Watch garde simplement un œil sur tous les répertoires que vous spécifiez, et une fois que quelque chose change, il déclenchera automatiquement certaines tâches de Grunt.
Vous pouvez donc configurer une condition de surveillance sur votre répertoire "js" pour exécuter vos tâches JavaScript, et une autre sur votre répertoire "css" pour exécuter vos tâches CSS. Cela signifie que vous n'aurez jamais à exécuter manuellement votre processus Grunt principal! Initialisez simplement la tâche de surveillance grognon avant de commencer à apporter des modifications et vous pouvez oublier qu'elle est même là.
Mots: Jamie Shields
Jamie Shields est un développeur back-end à l'agence de marketing numérique Stickyeyes.
Comme ça? Lis ça!
- Grunt vs Gulp: Quel outil de construction JavaScript devriez-vous choisir?
- 8 façons d'améliorer votre configuration Grunt
- Les meilleurs thèmes WordPress gratuits
