javascript - Difference between Grunt, NPM and Bower ( package.json vs bower.json )

I'm new to using npm and bower, building my first app in emberjs :).
I do have a bit of experience with rails, so I'm familiar with the idea of files for listing dependencies (such as bundler Gemfile)

Question: when I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json?

From what I gather,
running bower install will fetch the package and put it in /vendor directory,
running npm install it will fetch it and put it into /node_modules directory.

This SO answer says bower is for front-end and npm is for backend stuff.
Ember-app-kit seems to adhere to this distinction from the first glance... But instructions in gruntfile for enabling some functionality give two explicit commands, so I'm totally confused here.

Intuitively I would guess that

1. npm install --save-dev package-name would be equivalent to adding the package-name to my package.json




2. bower install --save package-name might be the same as adding the package to my bower.json and running bower install?

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?

Answer

Update for mid 2016:

The things are changing so fast that if it's late 2017 this answer might not be up to date anymore!

Beginners can quickly get lost in choice of build tools and workflows, but what's most up to date in 2016 is not using Bower, Grunt or Gulp at all! With help of Webpack you can do everything directly in NPM!

Don't get me wrong people use other workflows and I still use GULP in my legacy project(but slowly moving out of it), but this is how it's done in the best companies and developers working in this workflow make a LOT of money!

Look at this template it's a very up-to-date setup consisting of a mixture of the best and the latest technologies:
https://github.com/coryhouse/react-slingshot

• Webpack


• NPM as a build tool (no Gulp, Grunt or Bower)


• React with Redux


• ESLint


• the list is long. Go and explore!

Your questions:

When I want to add a package (and check in the dependency into git),
where does it belong - into package.json or into bower.json

• Everything belongs in package.json now




• Dependencies required for build are in "devDependencies" i.e. npm install require-dir --save-dev (--save-dev updates your package.json by adding an entry to devDependencies)



• Dependencies required for your application during runtime are in "dependencies" i.e. npm install lodash --save (--save updates your package.json by adding an entry to dependencies)

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?

Always. Just because of comfort. When you add a flag (--save-dev or --save) the file that manages deps (package.json) gets updated automatically. Don't waste time by editing dependencies in it manually. Shortcut for npm install --save-dev package-name is npm i -D package-name and shortcut for npm install --save package-name is npm i -S package-name