Difference between Grunt NPM and Bower package json vs bower json

Question

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     npm install --save-dev package-name would be equivalent to adding the package-name to my package json  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

User · 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.

A fact that makes this more confusing is that npm provides some packages which can be used in front-end development as well, like grunt and 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:

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

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

Please Note that 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 the middle of working on a node project and you need another project, say request, then you have two options:

Edit the package.json file and add a dependency on 'request'
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 the json file will be unaffected.

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

User · 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    Google  npm as build tool  result  https   medium com  dabit3 introduction-to-using-npm-as-a-build-tool-b41076f488b0  c33e74tsa Webpack  https   webpack github io docs installation html   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

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

Examples related to javascript

Examples related to gruntjs

Examples related to bower