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 · Accepted 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

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

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

Examples related to javascript

Examples related to gruntjs

Examples related to bower