web-dev-qa-db-fra.com

À quoi servent npm, bower, gulp, Yeoman et grunt?

Je suis un développeur backend, et légèrement confus par npm, bower, gulp, grunt et Yeoman. Chaque fois que je demande à quelqu'un quel est son but, la réponse se résume généralement au responsable de la dépendance - pour chacun d'eux. Certes, nous n'avons pas besoin de quatre outils différents qui font tous la même chose?

Quelqu'un peut-il expliquer à quoi chacun de ces éléments est bon en autant de phrases que possible - si possible un seul par outil, en utilisant un langage qu'un enfant de cinq ans (avec des compétences en développement) pourrait comprendre?

Par exemple:

  • SVN stocke, gère et conserve la trace des modifications apportées à notre code source

J'ai utilisé maven, Jenkins, nexus et ant dans le passé; peut-être pourriez-vous comparer les outils ci-dessus à ceux-ci?

N'hésitez pas à ajouter d'autres outils frontaux à la liste.

Voici ce que j'ai découvert jusqu'à présent - je ne suis pas sûr que ce soit correct, cependant:

  • bower gestionnaire de dépendances pour le développement frontal/bibliothèques JS, utilise une liste de dépendances plate
  • npm gestionnaire de dépendances pour le serveur node.js, peut résoudre les dépendances/arbres de dépendance
  • grunt exécute les tâches, un peu comme Jenkins, mais la localité sur la ligne de commande
  • Yeoman échafaudages fournis, c'est-à-dire projets de squelette
  • gulp idem que grognement, mais écrit en js seulement
  • node.js serveur pour les applications js?
  • git SCM/VCS décentralisé, homologue de svn/cvs

Suis-je proche? :)

30
Christian

Tu es proche! Bienvenue sur JavaScript :)

Permettez-moi de vous donner une courte description et une fonctionnalité avec laquelle la plupart des développeurs passent du temps.

bower Se concentre sur les packages utilisés dans le navigateur. Chaque bower install <packagename> indique exactement un fichier à inclure (d'autres peuvent être téléchargés). En raison du succès de Webpack, de Browserify et de Babel, il est principalement obsolète en tant que gestionnaire de dépendances de première classe.

Mise à jour 2018: Bower est principalement déconseillé en faveur de NPM

npm Historiquement se concentre sur le code NodeJS mais a renversé bower pour les modules de navigateur. Ne laissez personne vous tromper: le NPM est énorme. NPM charge également BEAUCOUP de fichiers dans votre projet et une nouvelle installation de npm est toujours une bonne raison de préparer une nouvelle tasse de café. NPM est facile à utiliser mais peut casser votre application lors des changements d'environnements en raison de la manière lâche de référencer les versions et de l'arbitraire de la publication des modules. Recherche Enveloppe rétractable et npm install --save-exact

Mise à jour 2018: NPM a grandi! De nombreuses améliorations concernant la sécurité et la reproductibilité ont été mises en œuvre.

grognement Facilite l'automatisation des tâches. Avale son frère plus âgé et un peu plus lent. La communauté JavaScript avait l'habitude de passer beaucoup de temps avec lui en 2014. Grunt est déjà considéré comme hérité à certains endroits, mais il existe encore une grande quantité d'automatisation vraiment puissante. La configuration peut être un cauchemar pour les cas d'utilisation plus importants. Il existe cependant un module de grognement.

Mise à jour 2018: le grognement est généralement obsolète. Les configurations de webpack faciles à écrire l'ont tué.

gulp Fait la même chose que grogner mais est plus rapide.

npm run-script Vous n'avez peut-être pas du tout besoin d'exécuteurs de tâches. Les scripts NodeJS sont vraiment faciles à écrire, donc la plupart des cas d'utilisation permettent un workflow d'automatisation des tâches personnalisé. Exécutez des scripts à partir du contexte de votre fichier package.json en utilisant npm run-script

webpack Ne manquez pas le webpack. Surtout si vous vous sentez perdu sur les nombreuses façons d'écrire JavaScript dans du code modulaire cohérent. Webpack regroupe les fichiers .js en modules et le fait magnifiquement. Webpack est hautement extensible et offre également un bon environnement de développement: webpack-dev-server À utiliser en conjonction avec babel pour la meilleure expérience JavaScript possible à ce jour.

Yeoman Échafaudage. Extrêmement précieux pour les équipes d'horizons différents car il fournit un terrain commun contrôlable pour l'architecture de vos projets. Il y a même un échafaudage pour échafaudages .

44
Mirko

Donc, puisque vous avez une bonne idée de ce que chacun est, je vais vous donner un flux de travail simple.

  1. J'utilise yeoman pour échafauder un squelette de base.
  2. J'utilise node comme runtime pour mon application. c'est à dire. courir node appname
  3. J'utilise npm pour installer des modules de nœud pour m'aider à écrire l'application dans le nœud
  4. Je pourrais avoir besoin d'un composant de bower comme les bibliothèques frontales, alors utilisez bower pour les récupérer.
  5. Maintenant, pour faire des tâches répétitives, j'utiliserai grognement ou gulp pour écrire certaines tâches. Donc, chaque fois que je veux le répéter, dites minimiser mes fichiers js que j'appelle grunt/gulp et faites-les le faire. Différence que vous demandez, Gulp est basé sur le flux tandis que le grognement est basé sur la tâche.
  6. Je fais le contrôle de version en utilisant git pour garder une trace des changements
7
JoviaArk

J'ai ajouté quelques détails:

npm est un gestionnaire de packages pour javascript, npm est l'écosystème de packages de nodejs, mais il ne peut être utilisé que pour des projets frontaux.

grunt & gulp sont utiles pour séparer et automatiser des tâches comme la minification, la compilation , tests unitaires en ligne de commande, c'est une solution beaucoup plus légère que (par exemple) Visual Studio car le processus n'est qu'une ligne de commande/processus séparé (et généralement léger).

Concernant les différences entre gulp , grognement et bower il y a déjà un ticket: Quelles sont les différences entre Grunt, Gulp.js et Bower? Pourquoi et quand les utiliser?

Nodejs est plus un runtime javascript . Node.js permet la création de serveurs Web et d'outils de mise en réseau à l'aide de js et d'une collection de "modules" qui gèrent diverses fonctionnalités de base et d'autres fonctions de base. Source

Ce ticket résume les différences entre Git et Subversion: Pourquoi Git est-il meilleur que Subversion?

1
Giu
  1. Gulp vs Grunt: Gulp offre plus de flexibilité avec l'automatisation des tâches, Grunt est livré avec de nombreuses fonctionnalités conformément aux pratiques de développement courantes. Il existe deux différences principales entre Grunt et Gulp:

    • Grunt se concentre sur la configuration, tandis que Gulp se concentre sur le code
    • Grunt a été construit autour d'un ensemble de tâches intégrées et couramment utilisées, tandis que Gulp est venu avec l'idée de ne rien imposer, mais comment les micro-tâches développées par la communauté devraient se connecter les unes aux autres Lire ici

  1. NodeJS: C'est un langage de script côté serveur non bloquant. Ce qui signifie que les opérations ne bloqueront pas l'exécution jusqu'à la fin de l'opération en cours.

  1. Git: Comme vous l'avez mentionné, il s'agit d'un outil SCM, largement utilisé. Selon les documents GitHub, il est différent des autres outils SCM car les données ne sont jamais supprimées.

    Git pense plus à ses données qu'à un ensemble d'instantanés d'un mini système de fichiers. Chaque fois que vous validez ou enregistrez l'état de votre projet dans Git, il prend essentiellement une photo de ce à quoi ressemblent tous vos fichiers à ce moment-là et stocke une référence à cet instantané.

    Lorsque vous effectuez des actions dans Git, presque tous n'ajoutent que des données à la base de données Git. Il est très difficile de faire en sorte que le système fasse tout ce qui n'est pas annulable ou de lui faire effacer des données de quelque manière que ce soit. Comme dans tout VCS, vous pouvez perdre ou gâcher des modifications que vous n’avez pas encore commises; mais après avoir validé un instantané dans Git, il est très difficile de le perdre, surtout si vous poussez régulièrement votre base de données vers un autre référentiel.

    En savoir plus


  1. Bower vs NPM: Bower et NPM sont des gestionnaires de dépendances, mais les modules Bower sont destinés au développement frontal. NPM est une énorme collection de modules à utiliser avec le backend NodeJS. Cette réponse SO la couvre mieux
1
Amresh Venugopal