web-dev-qa-db-fra.com

Runners de tâches (Gulp, Grunt, etc.) et Bundlers (Webpack, Browserify). Pourquoi utiliser ensemble?

Je suis un peu nouveau dans le monde des coureurs et groupeurs de tâches et en passant par des choses comme

Grunt, Gulp, Webpack, Browserify

, Je ne pensais pas qu’il y avait beaucoup de différence entre eux. En d'autres termes, je pense que Webpack peut faire tout ce qu'un coureur de tâches fait. Mais j'ai quand même de gros exemples où gulp et webpack sont utilisés ensemble. Je ne pouvais pas comprendre pourquoi.

Étant nouveau pour cela, je pourrais prendre les choses dans la mauvaise direction. Ce serait génial si vous pouviez indiquer ce qui me manque. Tous les liens utiles sont les bienvenus.

Merci d'avance.

111
invincibleDudess

Grunt et Gulp sont en réalité des exécuteurs de tâches. Ils présentent des différences telles que les tâches pilotées par la configuration par rapport aux transformations basées sur les flux. Chacun a ses forces et ses faiblesses, mais en fin de compte, ils vous aident à créer des tâches qui peuvent être exécutées pour résoudre un problème de construction plus important. La plupart du temps, ils n'ont rien à voir avec le temps d'exécution réel de l'application, mais plutôt ils transforment ou mettent des fichiers, des configs et d'autres choses en place afin que le fonctionnement fonctionne comme prévu. Parfois, ils génèrent même des serveurs ou d'autres processus dont vous avez besoin pour exécuter votre application.

Webpack et Browserify sont des groupeurs de paquets. Fondamentalement, ils sont conçus pour parcourir toutes les dépendances d'un paquet et concaténer leur source dans un fichier qui (idéalement) peut être utilisé dans un navigateur. Elles sont importantes pour le développement Web moderne, car nous utilisons un grand nombre de bibliothèques conçues pour fonctionner avec le compilateur Node.js et le compilateur v8 . Encore une fois, il existe des avantages et des inconvénients et des raisons différentes que certains développeurs préfèrent l’un ou l’autre (ou parfois les deux!). Habituellement, les ensembles de sortie de ces solutions contiennent une sorte de mécanisme d’amorçage pour vous aider à obtenir le bon fichier ou le bon module dans un ensemble potentiellement énorme.

La ligne floue entre les coureurs et les groupeurs peut être que les groupeurs peuvent également effectuer des transformations complexes ou trans-pilations pendant leur exécution, de sorte qu'ils puissent effectuer plusieurs tâches que les gestionnaires de tâches peuvent effectuer. En fait, entre browserify et webpack, il y a probablement une centaine de transformateurs que vous pouvez utiliser pour modifier votre code source. À titre de comparaison, il existe au moins 2 000 plugins gulp répertoriés sur npm pour le moment. Ainsi, vous pouvez voir qu'il existe des définitions claires (espérons-le ...;)) de ce qui fonctionne le mieux pour votre application.

Cela étant dit, vous pouvez voir un projet complexe qui utilise en même temps ou en tandem des groupeurs de packages. Par exemple, dans mon bureau, nous utilisons gulp pour démarrer notre projet, et Webpack est en fait exécuté à partir d'une tâche spécifique gulp qui crée les ensembles de sources dont nous avons besoin pour exécuter notre application dans le navigateur. Et parce que notre application est isomorphe , nous avons également regrouper une partie du serveur code.

À mon humble avis, vous voudrez peut-être vous familiariser avec toutes ces technologies, car il est probable que vous les utiliserez toutes au cours de votre carrière.

219
4m1r