Différence entre Grunt, NPM et Bower (package.json vs bower.json)

Je suis novice dans l'utilisation de npm et de bower, en créant ma première application dans emberjs :).
J'ai un peu d'expérience avec les rails, donc je connais bien l'idée des fichiers pour lister les dépendances (comme le bundle Gemfile)

Question: quand je veux ajouter un paquet (et archiver la dépendance dans git), où appartient-il - dans package.jsonou dans bower.json?

D'après ce que je comprends , l'
exécution bower installrécupérera le paquet et le placera dans le /vendorrépertoire, l'
exécutera npm installle récupérera et le mettra dans le /node_modulesrépertoire.

Cette réponse SO dit que bower est pour le front-end et que npm est pour le backend.
Ember-app-kit semble adhérer à cette distinction dès le premier coup d'œil ... Mais les instructions dans gruntfile pour activer certaines fonctionnalités donnent deux commandes explicites, donc je suis totalement confus ici.

Intuitivement, je suppose que

1. npm install --save-dev nom-package équivaudrait à ajouter le nom-package à mon package.json

2. bower install --save package-name peut être la même chose que d'ajouter le package à mon bower.json et d'exécuter bower install ?

Si tel est le cas, quand devrais-je jamais installer des packages explicitement comme ça sans les ajouter au fichier qui gère les dépendances (à part installer les outils de ligne de commande globalement)?

Mise à jour mi-2016 :

Les choses changent si vite que si c'est fin 2017, cette réponse pourrait ne plus être à jour!

Les débutants peuvent rapidement se perdre dans le choix des outils de construction et des workflows, mais ce qui est le plus à jour en 2016, ce n'est pas du tout d'utiliser Bower, Grunt ou Gulp! Avec l'aide de Webpack, vous pouvez tout faire directement dans NPM!

• Résultat Google "npm as build tool": https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

• Webpack: https://webpack.github.io/docs/installation.html

Ne vous méprenez pas, les gens utilisent d'autres flux de travail et j'utilise toujours GULP dans mon projet hérité (mais en sortant lentement), mais c'est ainsi que cela se fait dans les meilleures entreprises et les développeurs travaillant dans ce flux de travail font beaucoup d'argent!

Regardez ce modèle, c'est une configuration très à jour composée d'un mélange des meilleures et des dernières technologies: https://github.com/coryhouse/react-slingshot

• Webpack
• NPM comme outil de construction (pas de Gulp, Grunt ou Bower)
• Réagissez avec Redux
• ESLint
• la liste est longue. Allez explorer!

Vos questions:

Quand je veux ajouter un paquet (et vérifier la dépendance dans git), où appartient-il - dans package.json ou dans bower.json

• Tout appartient maintenant à package.json

• Les dépendances requises pour la construction sont dans "devDependencies" ie npm install require-dir --save-dev(--save-dev met à jour votre package.json en ajoutant une entrée à devDependencies)

• Les dépendances requises pour votre application pendant l'exécution sont dans des "dépendances" c'est-à-dire npm install lodash --save(--save met à jour votre package.json en ajoutant une entrée aux dépendances)

Si tel est le cas, quand devrais-je jamais installer des packages explicitement comme ça sans les ajouter au fichier qui gère les dépendances (à part installer les outils de ligne de commande globalement)?

Toujours . Juste à cause du confort. Lorsque vous ajoutez un indicateur ( --save-devou --save), le fichier qui gère deps (package.json) est mis à jour automatiquement. Ne perdez pas de temps en y éditant manuellement les dépendances. Raccourci pour npm install --save-dev package-nameis npm i -D package-nameet raccourci pour npm install --save package-nameisnpm i -S package-name

Npm et Bower sont tous deux des outils de gestion des dépendances. Mais la principale différence entre les deux est NPM est utilisé pour l' installation des modules de nœud , mais Bower js est utilisé pour gérer les éléments d'avant comme html, css, js etc .

Un fait qui rend cela plus confus est que npm fournit des packages qui peuvent également être utilisés dans le développement frontal, comme gruntet jshint.

Ces lignes ajoutent plus de sens

Bower, contrairement à npm, peut avoir plusieurs fichiers (par exemple .js, .css, .html, .png, .ttf) qui sont considérés comme les fichiers principaux. Bower considère sémantiquement ces fichiers principaux, lorsqu'ils sont regroupés, comme un composant.

Edit : Grunt est assez différent de Npm et Bower. Grunt est un outil d'exécution de tâches javascript. Vous pouvez faire beaucoup de choses en utilisant grunt que vous deviez faire manuellement sinon. Soulignant certaines des utilisations de Grunt:

1. Zipper certains fichiers (par exemple un plugin zipup)
2. Linting sur des fichiers js (jshint)
3. Compiler moins de fichiers (grunt-contrib-less)

Il existe des plugins grunt pour la compilation sass, uglifiant votre javascript, copiant des fichiers / dossiers, minifiant javascript, etc.

Veuillez noter que le plugin grunt est également un package npm.

Question 1

Quand je veux ajouter un paquet (et vérifier la dépendance dans git), où appartient-il - dans package.json ou dans bower.json

Cela dépend vraiment de l'appartenance de ce paquet. S'il s'agit d'un module de noeud (comme grunt, request), il ira dans package.json sinon dans bower json.

Question 2

Quand dois-je jamais installer des packages comme ça sans les ajouter au fichier qui gère les dépendances

Peu importe que vous installiez explicitement des packages ou mentionniez la dépendance dans le fichier .json. Supposons que vous êtes en train de travailler sur un projet de noeud et que vous ayez besoin d'un autre projet, disons request, alors vous avez deux options:

• Modifiez le fichier package.json et ajoutez une dépendance à la «demande»
• installation de npm

OU

• Utilisez la ligne de commande: npm install --save request

--saveoptions ajoute également la dépendance au fichier package.json. Si vous ne spécifiez pas d' --saveoption, il téléchargera uniquement le package mais le fichier json ne sera pas affecté.

Vous pouvez le faire de toute façon, il n'y aura pas de différence substantielle.