La bataille des scripts de construction: Gulp Vs Grunt

J'ai déjà écrit sur la façon de commencer avec Gulp ainsi que sur la façon de démarrer avec Grunt. Ils automatisent tous deux nos tâches, ils utilisent tous les deux Node, et tous les deux vous demandent de créer des tâches et d'installer des plugins . Mais vous interrogez-vous sur la différence entre les deux, ou même, ce qui est mieux?

Dans cet article, je vais me concentrer principalement sur les différences entre ces deux projets qui peuvent vous aider à décider lequel des deux vous pouvez juger meilleur pour vous-même. J'utiliserai du code qui pourrait ne pas être familier. Si c'est le cas, je vous suggère de lire les deux articles déjà publiés avant de commencer.

Plus sur Hongkiat.com

• Comment démarrer avec Gulp
• Comment démarrer avec Grunt

La vitesse

La principale différence entre Gulp et Grunt réside dans la façon dont ils traitent leurs tâches d'automatisation à l'intérieur . Gulp utilise des flux de nœuds tandis que Grunt utilise des fichiers temporaires. Mettons ça en anglais, n'est-ce pas?

Supposons que vous souhaitez écrire le code SASS pour votre projet. Vous voudriez compiler votre code SASS et peut-être le réduire.

Grunt gère cela en utilisant des fichiers intermédiaires qui sont des opérations d'E / S disque. Votre fichier SASS est compilé et ensuite écrit dans un fichier temporaire. Le fichier temporaire est utilisé par l'autoprefixer, puis le produit final est écrit dans le fichier de destination.

Gulp prend soin de tout cela en mémoire . Votre fichier SASS source est compilé, le résultat est transmis à autoprefixer sans être écrit dans un fichier et le fichier de destination est ensuite écrit.

Comparé aux opérations en mémoire, les écritures sur disque sont lentes ce qui signifie que Gulp a un grand avantage de vitesse (pour l'instant). Une comparaison de vitesse a été faite par tech.tmw qui montre que la plupart des tâches sont au moins deux fois plus rapides sur Gulp. Bien que ce ne soit pas une étude extrêmement scientifique, la tendance est là et j'ai vu la même chose avec mes propres projets. Mais quel est l'impact de la différence de vitesse?

Différence en secondes

Pour la plupart des projets, cela n'aura pas d'importance. La plupart des projets sont petits . Lorsque vous créez un thème WordPress ou quelque chose de similaire, le nombre de fichiers avec lesquels vous devez travailler est bien dans une limite raisonnable. Ce n'est pas grave si vos feuilles de style sont compilées en 400ms ou 800ms.

En outre, la plupart des projets peuvent être structurés de telle sorte que certains des problèmes les plus intenses peuvent être évités . Si vous avez 50 fichiers SASS, vous pouvez tout aussi rapidement les concaténer en cours de développement, il ne sera pas nécessaire de les autopréver ou de les réduire. Vous n'aurez pas besoin d'optimiser les images chaque fois que vous enregistrez un projet, et ainsi de suite.

Même lorsque vous avez vraiment besoin des gros calibres parce que vous faites passer votre travail sur un serveur intermédiaire ou lorsque vous mettez à jour un référentiel, est-ce que le temps de construction de 5 secondes ou 9 secondes fait une grande différence?

Pour couronner le tout, Grunt ajoutera du support pour la tuyauterie dans la version 0.5 à venir, ce qui accélèrera considérablement les choses, ce qui rendra tout cela discutable.

La communauté

Grunt a été beaucoup plus long que Gulp, donc il a une base d'utilisateurs importante. Grunt reçoit actuellement environ 37 000 téléchargements par jour en moyenne, et Gulp en obtient un peu plus de la moitié, soit près de 23 000 téléchargements. Cela étant dit, Gulp n'a été là que depuis un an et demi, rendant ce nombre respectable pour dire le moins.

Grunt a actuellement plus de 4000 plugins tandis que Gulp a plus de 1200 plugins. Selon les tendances de Google, plus de gens recherchent des choses liées à Grunt, il y a plus de forums qui traitent de cela et généralement plus de soutien de la communauté.

Bien sûr, Gulp est sur le point d'arriver, ce qui signifie que cela va probablement se stabiliser à long terme . Cependant, c'est un obstacle pour certains développeurs, en particulier ceux qui travaillent sur des projets Grunt.

Je voudrais souligner que les communautés pour les deux sont extrêmement gentils . Autant que je sache, la relation entre les leaders de chaque communauté est incroyable et devrait servir d'exemple pour tous. Le créateur de Gulp a réellement aidé le rédacteur de la comparaison de test de vitesse à améliorer les précisions de synchronisation qui mènent à une diminution des différences de temps. C'est ce que j'appelle un gentleman!

Configuration du code Vs

Apparemment, c'est le point de basculement pour beaucoup, mais pour être honnête, je ne peux pas voir le problème ici personnellement.

L'argument est le suivant: Gulp est un bon exemple que le code sur la configuration peut être une bonne chose lorsque la configuration devient un peu confuse . D'autres personnes disent que même si cela est vrai et que Gulp est plus facile à lire, il est plus difficile d' écrire parce que la tuyauterie peut être un peu déroutante .

Avant de peser, voici le même exemple dans Grunt, puis dans Gulp:

 grunt.initConfig ({sass: {dist: {fichiers: [{src: 'dev / *. scss', dest: '.tmp / styles', développez: true, ext: '.css'}]}}, autoprefixer : {dist: {files: [{expand: vrai, cwd: '.tmp / styles', src: '{, * /} *. css', dest: 'css / styles'}]}}, regardez: { styles: {files: ['dev / *. scss'], tâches: ['sass: dist', 'autoprefixer: dist']}}}); grunt.registerTask ('default', ['styles', 'watch']); 

 gulp.task ('sass', function () {gulp.src ('dev / *. scss') .pipe (sass ()) .pipe (autoprefixer ()) .pipe (gulp.dest ('css / styles' ));}); gulp.task ('default', function () {gulp.run ('sass'); gulp.watch ('dev / *. scss', fonction () {gulp.run ('sass');});} ) 

Mon opinion est que cela n'a vraiment pas d'importance. Bien sûr, si vous êtes habitué à la première façon, vous devrez peut-être passer du temps à trouver la seconde, mais c'est aussi vrai, vice versa. Donc, pour moi, l'argument "c'est confus" est complètement invalide. Toute nouvelle méthode que vous apprenez est déroutante au début, mais si vous prenez le temps de comprendre la logique de chacun, tout est égal.

Cela dit, personnellement, je préfère l'API de Gulp parce qu'elle est plus propre et reflète la façon dont je pense plus étroitement que Grunt. Ceci est bien sûr complètement subjectif et n'est pas du tout un problème avec Grunt, c'est juste ma préférence personnelle.

Comment choisir

Je ne pense pas qu'il y ait de doute sur le fait que Grunt et Gulp sont d'excellents outils et ont aidé les gens à économiser d'innombrables heures au fil des ans. Grunt est un peu plus lent pour l'instant, mais a une communauté beaucoup plus grande. Gulp est plus rapide, a une API plus propre, mais manque de base d'utilisateurs.

Je pense que la décision se résumera finalement à la continuité, aux plugins disponibles et à la préférence .

(1) Si vous utilisez Grunt / Gulp depuis un moment et que vous en êtes satisfait, il n'y a pas de raison de changer.

(2) Si votre projet nécessite des plugins qui ne sont pas fournis par Gulp et que vous n'êtes pas prêt à en écrire un vous-même, vous devrez utiliser Grunt.

(3) Si les deux considérations ci-dessus ne s'appliquent pas à vous, cela se résoudra à la préférence. Je suggère d'essayer les deux et de voir lequel colle à vous .

Comme je l'ai dit, j'ai choisi d'utiliser Gulp parce que j'aime mieux son API plus propre, mais je suis parfaitement à l'aise avec Grunt si un projet l'exige. Ce que vous ne devriez pas faire est de lire que M. Know-it-all a dit que Gulp est meilleur et l'accepte. Bien qu'il existe des différences, il n'y a pas de gagnant clair et les deux projets peuvent coexister, et le seront . Essayez-les et faites votre propre opinion.

Remarque: vous pouvez également prendre en compte les avis d'utilisateurs comme Keith Cirkel (un consultant Javascript) qui vous conseille de ne pas utiliser. Dans son intéressant Pourquoi nous devrions cesser d'utiliser l'article de Grunt & Gulp, il suggère d'utiliser npm.

Lecture supplémentaire

Il y a beaucoup d'autres excellents articles sur ce sujet. Je recommande chaudement l'un des éléments suivants pour une lecture plus approfondie; ça ne fait jamais de mal de lire ce que les autres ont à dire!

• Grunt vs Gulp - Au-delà des chiffres (merci spécial pour les exemples clairs)
• Gulp, Grunt, Peu importe
• Choisissez: Grunt, Gulp ou NPM?
• Gulp et Grunt de Speedtesting
• Pourquoi devrions-nous cesser d'utiliser Grunt & Gulp
• Construire des guerres (utilisez les flèches pour naviguer)
• Pas besoin de grogner, prendre une gorgée d'air frais

Les conceptions d'emballage de gadget: 20 exemples frais et intelligents

Ici, à hongkiat.com, nous avons été fans de designs d'emballages créatifs pour toujours. Et dernièrement, les conceptions d'emballage prennent plusieurs choses, par exemple:Conceptions créatives de paquet pour des bouteilles et des bocaux que vous devez voir20 designs d'emballages de jouets qui sont tout à fait adorablesBelles conceptions d'emballage de thé [vitrine]Emballage interactif: 15 exemples intelligents que vous devriez vérifierDans un post de suivi, nous avons pour vous 20 designs d'emballages électroniques impressionnants et créatifs pour certains de vos appareils

(Conseils techniques et de conception)

20 vidéos d'expériences sociales que vous devriez regarder

Les expériences sociales sont un excellent moyen d'avoir une compréhension plus large de la façon dont les humains pensent et agissent . Ce qui était une activité limitée menée principalement par des chercheurs est maintenant largement fait par des gens ordinaires comme vous et moi, cherchant des réponses à ce qui se passe et ce qui va se passer? Le meil

(Conseils techniques et de conception)