ChtiJS / chtijs.francejs.org

ChtiJS website
http://chtijs.francejs.org
MIT License
18 stars 8 forks source link

Gulp vs Grunt #25

Closed nfroidure closed 10 years ago

nfroidure commented 10 years ago

Toujours dans l'esprit de l'expérimentation, je me disais que ça pourrait être pas mal de réimplémenter notre workflow Grunt avec Gulp histoire de faire des tests de performance.

Là, je suis en plein travvail pour aider à la préparation de Gulp 4 qui risque de supporter les streams encore plus, mon idée était donc de:

Et faire une comparaison entre Grunt/Gulp buffer/Gulp stream.

Ça tente quelqu'un de s'y mettre avec moi ?

kdisneur commented 10 years ago

Je propose Grunt vs Gulp vs Brunch :tada:

Un collègue a entendu parlé de Brunch à une formation JS, il parait que c'est vraiment sympa. Vous avez des retours ?

0gust1 commented 10 years ago

Pourquoi pas. J'ai tenté l'exercice (refaire le build en Gulp) avant les fêtes, mais la moitié des plugins étaient pétés. J'ai soupiré très fort et suis allé reprendre de la bûche... :)

neemzy commented 10 years ago

@kdisneur Brunch ça m'a l'air d'être un truc vachement packagé aussi, ça s'intègre bien avec quelque chose d'existant et d'un peu "custom" comme ici ?

Je vois des solutions dans le genre fleurir ces derniers temps, mais je doute qu'aucune d'entre elle ne remplace la flexibilité de Grunt (et peut-être de Gulp, que j'ai pas testé).

Ce qu'il faudrait à Grunt, c'est une meilleure syntaxe pour éviter les répétitions, et ce serait le paradis.

nfroidure commented 10 years ago

@neemzy c'est clairement ce que propose Gulp. Par contre, effectivement, la plupart des plug-ins sont cassés car il y a eu pas mal de changements non rétro-compatibles.

Je suis entrain d'en réparer quelques-uns en même temps que je les rend compatibles avec les streams.

@0gust1 peux-tu me dire quels plugins t'ont posé problème ?

0gust1 commented 10 years ago

@nfroidure : Gulp-marked notamment. En regardant le code d'autres plugins, j'ai pisté pas mal de syntaxes incompatibles avec la dernière version de de gulp (gulp.src() et gulp.dest() notamment.). Je m'étais promis de regarder et de faire une PR sur le sujet, mais pas eu le temps.

edit : je viens de voir ta PR, nicolas... ;-)

Sinon... je suis en train de me "streamiser" à mort. L'article de @substack est vraiment bien. : https://github.com/substack/stream-handbook

nfroidure commented 10 years ago

@0gust1 amusant, je venais de faire un PR dessus https://github.com/lmtm/gulp-marked/pull/1 :)

nfroidure commented 10 years ago

Déjà, y'a plusieurs plugins gulp à créer de toute pièce comme les plugins pour les fontes. C'est pas compliqué c'est juste des wrappers à créer. Si vous vous sentez chaud :).

J'ai commencé celle-là https://github.com/nfroidure/gulp-svgiconstosvgfont

0gust1 commented 10 years ago

Pour faire un plugin gulp : https://github.com/gulpjs/gulp/wiki/Writing-a-gulp-plugin

nfroidure commented 10 years ago

Petite liste des plug-ins à trouver ou déjà existant : grunt-svgicons2svgfont : https://github.com/nfroidure/gulp-svgiconstosvgfont \o/ grunt-svg2ttf : https://github.com/nfroidure/gulp-svg2ttf o/ grunt-ttf2eot : https://github.com/nfroidure/gulp-ttf2eot o/ grunt-ttf2woff : https://github.com/nfroidure/gulp-ttf2woff o/ grunt-contrib-watch : https://github.com/floatdrop/gulp-watch !!! grunt-contrib-clean : https://github.com/peter-vilja/gulp-clean \o/ grunt-contrib-less : https://github.com/plus3network/gulp-less o/ - PR en cours https://github.com/plus3network/gulp-less/pull/12 grunt-contrib-cssmin : https://github.com/jonathanepollack/gulp-minify-css o/ - PR accepté https://github.com/jonathanepollack/gulp-minify-css/pull/1 grunt-contrib-imagemin : https://github.com/ksky521/imagemin /o\ grunt-contrib-jshint : https://github.com/wearefractal/gulp-jshint \o/ PR en cours https://github.com/wearefractal/gulp-jshint/pull/16 grunt-svgmin : https://github.com/ben-eb/gulp-svgmin o/ - PR accepté https://github.com/ben-eb/gulp-svgmin/pull/2 grunt-browserify : https://github.com/deepak1556/gulp-browserify \o/ - PR en cours https://github.com/deepak1556/gulp-browserify/pull/10 grunt-gh-pages : ! grunt-contrib-connect : ! grunt-contrib-copy : pas besoin ? makdown : https://github.com/lmtm/gulp-marked o/ - PR accepté https://github.com/lmtm/gulp-marked/pull/1 htmlmin : https://github.com/jonathanepollack/gulp-minify-html !!! gulp-concat : https://github.com/wearefractal/gulp-concat \o/ - PR en cours https://github.com/wearefractal/gulp-concat/pull/14

Légende:

Ajoutez vos trouvailles en commentaire et j'update la liste. Pour certains, on utilise pas encore le plugin grunt (markdown/htmlmin), à voir si on les intègre et si on en profite pour ajouter l'équivalent Grunt.

neemzy commented 10 years ago

Beau boulot !

Par curiosité, tu pourrais expliciter la différence entre "support des streams en fallback" et tout court ?

nfroidure commented 10 years ago

Par exemple :

nfroidure commented 10 years ago

Je crois que je vais faire un article en français pour expliquer comment créer des plug-ins Gulp propres.

jbpionnier commented 10 years ago

Oh yeah ! Excellent... beaux boulot.

La question me taraude depuis quelques semaines : faut-il passer à Gulp ou attendre... Je voulais connaître l'avancer des plugins... c'est cool ca.

Quelqu'un a basculé de Grunt à Gulp : un retour d'expérience ? perf ? etc... Un article pour écrire un plugin Gulp serait top aussi :-)

et sinon j'oubliais bonne année les gens

neemzy commented 10 years ago

Ça m'intéresse aussi ! :+1:

[HS]Bonne année oui ! @jbpionnier merci encore pour ta démo sur MEAN, je m'en suis bien inspiré sur un projet perso et c'est vraiment plaisant à utiliser :)[/HS]

nfroidure commented 10 years ago

Bon pour nous simplifier la vie, j'ai créé:

Je vous propose la création d'une branche gulp pour le site sur laquelle on virerait tout ce qui est relatif à grunt pour commencer et enfin ajouter au fur et à mesure les tâches gulp idoïnes.

0gust1 commented 10 years ago

Comment il dépote Nico ^^

+1 pour la création d'une branche gulp ! ça permettra de comparer objectivement.

nfroidure commented 10 years ago

Plop ! La branche https://github.com/ChtiJS/chtijs.francejs.org/tree/gulp

Y'a tout sauf:

Empiriquement, j'ai envie de dire que ça poutre, mais j'attends les benchs pour tirer des conclusions.

neemzy commented 10 years ago

Hmm, effectivement gulp-watch n'a pas l'air d'embarquer le livereload comme son équivalent Grunt... En revanche ça semble pouvoir être fait via ce plugin.

C'est limite mieux que ce soient deux plugins séparés, c'est plus propre à mon sens. Faut vraiment que je teste :D

nfroidure commented 10 years ago

J'ai créé un autre plugin, cette fois pour créer un arbre qui contiendra toutes les métas données des différentes pages. L'idée est de pouvoir se baser dessus pour le menu ou la liste des entrées d'une page... https://github.com/nfroidure/gulp-vartree Surtout si vous avez des suggestions...

nfroidure commented 10 years ago

Le build est full fonctionnel. Par contre le watch est tout buggé et le code est crade car j'ai pas mal tâtonné.

L'avantage de cette version est que le contenu des menus et des pages de type liste (ex le blog), se fait via un arbre qui est généré pendant le parsing des fichiers markdown (gulp-vartree).

Je vais rebosser sur l'arbre que je récupère pour qu'il soit plus intuitif. Je songe également à faire un plugin gulp-chtibuild pour isoler la génération du contenu statique.

Sinon, à part le watch, il manque tjrs un gulp-gh-pages.

nfroidure commented 10 years ago

Bon, tout est ok sauf la publication sur gh-pages. Quelqu'un se dévoue pour faire les scripts du benchmark ?

Y'a une pollution de la console à cause d'un oubli de ma part https://github.com/lmtm/gulp-marked/pull/4#issuecomment-32706369 . Je pense que @t8g va merger bientôt :).

@neemzy pour le menu récursif, y'a un autre souci pour afficher l'item de menu sélectionné, là j'ai un truc bien crade pour gérer trois niveaux, je sais pas ce qu'on peut faire avec les templates imbriqués. https://github.com/ChtiJS/chtijs.francejs.org/blob/gulp/documents/templates/layout.tpl#L30

Je vous laisse tester et voir si on switch la version Gulp sur le master ou pas.

nfroidure commented 10 years ago

Vu que le sujet passione pas les foules, j'ai fait le benchmark https://gist.github.com/nfroidure/8543653 si vous pouviez tester surtout si vous avec un disque dur classique.

0gust1 commented 10 years ago

Vraiment désolé @nfroidure, je suis complètement sous l'eau en ce moment (là, 21h44, je viens juste de rentrer chez moi)... pas trop le temps d'avancer sur les sujets extra-professionnels :-/

Par contre, j'ai un disque dur "classique" ;)

neemzy commented 10 years ago

Idem, je suis assez pris (pas autant qu' @0gust1 mais tout de même ^^) mais c'est dans ma todo du week-end :)

Edit : et je tourne pas sur SSD non plus !

nfroidure commented 10 years ago

ok, on a fait le job.