La bataille des scripts de construction Gulp Vs Grunt

J'ai déjà écrit sur la façon de démarrer avec Gulp et sur celle de Grunt. Les deux automatiser nos tâches, Les deux utiliser le noeud, et ils exigent tous les deux que vous créer des tâches et installer des plugins de quelque sorte. Mais vous vous interrogez sur la différence entre les deux, ou même, qui est préférable?

Dans cet article, je vais me concentrer principalement sur les différences entre ces deux projets ce qui peut vous aider à choisir lequel de ces deux facteurs vous convient le mieux. Je vais utiliser un code qui peut être inconnu. Si tel est le cas, je suggère de lire les deux articles précédemment publiés avant de commencer..

Plus sur Hongkiat.com

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

La vitesse

La principale différence entre Gulp et Grunt réside dans comment ils gèrent leurs tâches d'automatisation à l'intérieur. Gulp utilise des flux de nœuds tandis que Grunt utilise des fichiers temporaires. Mettons cela en anglais clair, allons-nous?

Supposons que vous souhaitiez écrire du code SASS pour votre projet. Vous voudriez compiler votre code SASS et ensuite peut-être le minimiser.

Grunt gère cela en utilisant fichiers intermédiaires qui sont des opérations d'E / S de disque. Votre fichier SASS est compilé puis écrit dans un fichier temporaire. Le fichier temporaire est utilisé par le préfixe automatique, 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 à l'autopréfixeur sans être écrit dans un fichier, puis le fichier de destination est écrit..

Comparées aux opérations en mémoire, les écritures sur disque sont lentes, ce qui signifie que Gulp a un gros avantage en vitesse (pour l'instant). Tech.tmw a comparé la vitesse, ce 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 quelle est l’impact de la différence de vitesse??

Différence en secondes

Pour la plupart des projets, cela n'a 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 les limites raisonnables. Peu importe que vos feuilles de style soient compilées en 400 ms ou 800 ms.

En outre, la plupart des projets peuvent être structuré de telle manière que certaines des questions les plus intenses puissent être évitées. Si vous avez 50 fichiers SASS, vous pouvez les concaténer aussi rapidement en cours de développement, il ne sera pas nécessaire de les préfixer ou de les minimiser. Vous n’avez pas besoin d’optimiser les images chaque fois que vous enregistrez un projet, etc..

Même lorsque vous avez vraiment besoin des gros canons parce que vous placez votre travail sur un serveur de transfert ou lorsque vous mettez à jour un référentiel, un temps de construction de 5 ou 9 secondes fait-il une différence??

Pour couronner le tout, Grunt ajoutera la prise en charge de la tuyauterie dans la prochaine version 0.5, ce qui accélérera considérablement les choses, ce qui en fera un point discutable..

La communauté

Grunt existe depuis beaucoup plus longtemps que Gulp, il compte donc une base d'utilisateurs importante. Grunt reçoit actuellement environ 37 000 téléchargements par jour en moyenne, Gulp en obtient un peu plus de la moitié, près de la marque 23 000. Cela étant dit, Gulp n’existe que depuis un an et demi, ce qui le rend respectable pour le moins..

Grunt compte actuellement plus de 4000 plugins, tandis que Gulp compte plus de 1200 plugins. Selon les tendances de Google, de plus en plus de personnes recherchent des éléments liés à Grunt, il existe davantage de forums traitant de ce sujet et généralement plus de soutien de la part de la communauté.

Bien sûr, Gulp est à venir, ce qui signifie que c'est susceptible de même à long terme. Cependant, cela constitue un obstacle pour certains développeurs, en particulier ceux qui travaillent sur des projets basés sur Grunt..

Je tiens à souligner que les communautés pour les deux sont extrêmement gentil. Autant que je sache, la relation entre les dirigeants de chaque communauté est étonnante et devrait servir d'exemple à tous. Le créateur de Gulp a en fait aidé le rédacteur de la comparaison de tests de vitesse à améliorer les précisions de synchronisation, ce qui a permis de réduire les différences de temps. C'est ce que j'appelle un gentleman!

Configuration 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 qui Code sur la configuration peut être une bonne chose lorsque la configuration devient un peu déroutant. D’autres personnes disent que cela est vrai et que Gulp est plus facile à lis, il est plus difficile de écrire parce que la tuyauterie peut être un peu déroutant.

Avant de commencer, 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', autopréfixe : dist: fichiers: [expand: true, cwd: '.tmp / styles', src: ', * / *. css', dest: 'css / styles'], regardez:  styles: fichiers: ['dev / *. scss'], tâches: ['sass: dist', 'préfixe automatique: 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', function () gulp.run ('sass');); ) 

Mon avis est que cela n'a pas vraiment d'importance. Bien sûr, si vous êtes habitué à la première façon, vous devrez peut-être passer du temps à comprendre la seconde, mais cela est également vrai. Donc pour moi, le “c'est confu” l'argument est complètement invalide. Tout 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 uni.

Cela dit, je préfère personnellement L'API de Gulp parce qu'elle est propreer, et cela reflète la façon dont je pense plus étroitement que Grunt. C'est bien sur 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 pense qu'il ne fait aucun doute que Grunt et Gulp sont d'excellents outils et ont permis aux utilisateurs de gagner un nombre incalculable d'heures au fil des ans. Grunt est un peu plus lent pour l'instant, mais sa communauté est beaucoup plus grande. Gulp est plus rapide, a une API plus propre, mais manque de base d'utilisateurs.

Je pense que la décision finira par se résumer à continuité, plugins disponibles et préférence.

(1) Si vous utilisez Grunt / Gulp depuis un moment maintenant et tu es content, il n'y a aucune raison de passer.

(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 y aller avec Grunt.

(3) Si les deux considérations ci-dessus ne s'appliquent pas à vous, ce sera une préférence. Je suggère d'essayer les deux et de voir lequel on colle avec toi.

Comme je l'ai dit, j'ai choisi Gulp parce que j'aime mieux son API, mais je suis tout à fait à l'aise d'utiliser Grunt si un projet l'exige. Ce que vous devriez ne pas est lu 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 et vont coexister. Essayez-les et faites-vous votre propre idée.

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

Lectures complémentaires

Il existe de nombreux autres excellents articles sur ce sujet. Je recommanderais vivement l'une des choses suivantes pour une lecture plus approfondie; il n'est jamais mauvais 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?
• Speedtesting Gulp et Grunt
• Pourquoi devrions-nous arrêter d'utiliser Grunt & Gulp
• Build Wars (utilisez les flèches pour naviguer)
• Pas besoin de grogner, prenez une gorgée d'air frais