apprenticeDev apprenticeDev - 3 months ago 30
Javascript Question

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

Npm and Bower are both dependency management tools. But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html,css,js etc.

The fact that npm provides some packages which can be used in front-end development like grunt, jshint.

These lines add more meaning

Bower, unlike npm, can have multiple files (e.g. .js, .css, .html, .png, .ttf) which are considered the main file(s). Bower semantically considers these main files, when packaged together, a component.

Edit: Grunt is quite different from Npm and Bower. Grunt is a javascript task runner tool. You can do a lot of things using grunt which you had to do manually otherwise. Highlighting some of the uses of Grunt:

  1. Zipping some files (e.g. zipup plugin)
  2. Linting on js files (jshint)
  3. Compiling less files (grunt-contrib-less)

There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc.

Please Note grunt plugin is also an npm package.

Question-1

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

It really depends where does this package belong to. If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json.

Question-2

When should I ever install packages explicitly like that without adding them to the file that manages dependencies

It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file. Suppose you are in middle of node project and you need another project say request, you have two options:

  • Edit the package.json file and add dependency
  • npm install

OR

  • Use commandline: npm install --save request

--save options adds the dependency to package.json file as well. If you don't specify --save option, it will only download the package but json file will be unaffected.

You can do this either way, there will not be a substantial difference.