Quelles sont les différences entre Grunt, Gulp.js et Bower? Pourquoi et quand les utiliser?
Quelles sont les différences entre Grunt, Gulp.js et Bower? Pourquoi et quand et comment les utiliser?
J'ai vu de nos jours, la plupart des projets frontaux utilisent les outils ci-dessus, bien que je les utilise comme dans mon projet récent, j'utilise gulp pour construire HTML, CSS et JavaScript en utilisant un script comme
$ gulp build
mais je n'ai pas beaucoup de compréhension de tous ces frameworks frontaux, veuillez m'aider à avoir une compréhension globale de Grunt, Gulp.js et Bower.
Essentiellement et avec beaucoup de détails, Gulp et Grunt sont tous deux des systèmes d'automatisation de séries de tâches interdépendantes, couramment utilisés pour définir la "build" "de votre projet, comme une version moderne de l'outil make. En règle générale, un projet utilise l'un ou l'autre, mais pas les deux en même temps (pour les mêmes parties, de toute façon).
Bower est différent, et fréquemment utilisé avec Gulp ou Grunt: c'est un gestionnaire de packages pour les bibliothèques côté client, ce qui facilite la mise à jour de ces bibliothèques, leur spécification et leurs dépendances de manière standardisée , et ainsi de suite.
Le Gulp one-liner de leur site Web:
Automatisez et améliorez votre flux de travail
La doublure Grunt de la leur:
Le gestionnaire de tâches JavaScript
Et Bower:
Un gestionnaire de packages pour le Web
Pourquoi et quand les utiliser?
Je pense que ce qui précède couvre cela pour Gulp et Grunt: si vous avez des tâches que vous souhaitez automatiser (comme la création de la version finale d'un site Web avec minification, concaténation, compression, etc.; ou regarder les fichiers pour les changements et relancer les tâches quand ils changer pour prendre en charge un développement rapide), vous pouvez utiliser Gulp et Grunt pour cela.
Mais ce n'est pas seulement des builds. Vous pouvez utiliser Gulp et Grunt pour n'importe quelle série de tâches que vous devez automatiser.
Bower est utile pour gérer les bibliothèques côté client dans vos projets. Vous pouvez utiliser Bower pour installer, par exemple, la dernière version de Bootstrap, et il placera les fichiers appropriés dans des emplacements standard de votre projet. Bower peut mettre à jour ces fichiers si un nouveau Bootstrap sort. Si une bibliothèque dépend d'autres bibliothèques (le JS de Bootstrap s'appuie sur jQuery, par exemple), Bower aide à gérer cet arbre. Il y a des tâches utiles pour Grunt (et je suppose pour Gulp) qui peut même automatiser l'ajout du script et des balises de lien à votre HTML pour ces bibliothèques, en ayant un espace réservé dans votre HTML source qui dit essentiellement "mettez les bibliothèques Bower ici".
gulp et Grunt sont des exécuteurs de tâches. Ce sont des approches différentes du même problème. Grunt utilise une approche basée sur la configuration, tandis que gulp utilise des flux de node pour obtenir le résultat. Vous les utilisez pour définir comment et quelles tâches exécuter (copie de fichiers, ajout de bannières, remplacement de texte, vérification de style, etc ...). Ils sont (généralement) exécutés manuellement à partir de la ligne de commande.
Par exemple, si la copie et la modification de fichiers Grunt créera des fichiers intermédiaires et gulp exploitera les flux de node et se transformera à la volée.
Quand utiliser Grunt ou gulp est une réponse moins spécifique car elle prend en compte les préférences personnelles, le support technologique (plugins pour certaines tâches), les spécificités du projet et la facilité de configuration. Les deux sont relativement faciles à installer et à exécuter, mais vous finirez généralement par en choisir un qui a de meilleurs plugins pour la pile technologique utilisée pour votre projet (bien que les deux aient un bon support des plugins).
Bower est le gestionnaire de paquets. Il est utilisé pour installer des packages javascript (principalement côté client) (cependant npm - également gestionnaire de paquets - contient également presque tous ces modules/packages. Vous l'utilisez pour automatiser la gestion des dépendances et l'installation des packages.
de continuer sur le poste de T.J. Crowder, Bower est assez similaire à NPM, ou Composer ou Gem. La plus grande différence entre NPM et Bower, est que bower est pour les packages frontaux, tandis que NPM (autrefois) pour les packages backend. NPM propose désormais des packages frontend ainsi que des packages backend.
De plus, vous avez besoin de NPM pour installer Bower.
Grunt a été le premier de ces automatiseurs de tâches frontaux qui était disponible. Cela a donné une meilleure expérience que ce qui était disponible à l'époque. Il a toujours une grande communauté de suiveurs et active.
Gulp est venu de grognement, d'une certaine manière, et l'améliore en utilisant des flux, pas des fichiers.
Grunt écrit des modifications dans un fichier et le charge dans ce fichier pour en manipuler davantage. Gulp lit un fichier, effectue toutes les transformations sur le flux de données et n'écrit que lorsque toutes les manipulations ont été effectuées. Cela signifie qu'il est asynchrone et plus rapide que le grognement. Et je crois que Gulp devrait être utilisé pour de nouveaux projets en faveur de grognement.
Il y a probablement de grands cas d'utilisation où les préformes grognent mieux que la gorgée, mais généralement la gorgée est plus rapide.
Je viens de terminer une analyse de Gulp vs Grunt (notre norme antérieure) et bien que je pense que les deux sont importants à savoir pour qu'un développeur front-end soit à jour et les deux sont de bonnes solutions que j'apprends vers Gulp pour de futurs projets pour les raisons suivantes:
Gulp est généralement plus concis (les plugins ne font qu'une chose et l'approche des flux) et lisible. Un script Grunt que j'ai refait dans Gulp n'a entraîné qu'un quart des lignes de code pour produire le même résultat.
Gulp est plus rapide en général.
- Bien que Gulp ait moins de plugins et des plugins de documentation plus minces pour la minification, la concaténation, la liste, la transpilation MOINS, etc., sont actuellement disponibles et fonctionnent bien.