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

by

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:

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

More Related Contents:

  1. npm – EPERM: operation not permitted on Windows
  2. What is the difference between Bower and npm?
  3. Tried to Load Angular More Than Once
  4. Have Grunt generate index.html for different setups
  5. What is causing this error – “Fatal error: Unable to find local grunt”
  6. grunt (minimatch/glob) folder exclusion
  7. Bower: ENOGIT Git is not installed or not in the PATH
  8. How to include scripts automatically in a yeoman/grunt project?
  9. Replace a string in a file with nodejs
  10. How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)
  11. Extending AngularJs Directive
  12. Angularjs minification using grunt uglify resulting in js error
  13. What is the role of src and dist folders?
  14. ESLint’s “no-undef” rule is calling my use of Underscore an undefined variable
  15. configure node express to serve static bower_components?
  16. WARNING: Tried to load angular more than once. Angular JS
  17. Can’t install any NPM package, error 4058
  18. JavaScript dependency management: npm vs. bower vs. volo [closed]
  19. Running a command in a Grunt Task
  20. How to register a local git package in Bower?
  21. Programmatically pass arguments to grunt task?
  22. Configure grunt copy task to exclude files/folders
  23. Get cookie by name
  24. Why does a while loop block the event loop?
  25. (HTML) Download a PDF file instead of opening them in browser when clicked
  26. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  27. How to get an element’s top position relative to the browser’s viewport?
  28. Javascript sort array of objects by a boolean property
  29. getting the last item in a javascript object
  30. How to check a file’s existence in phone directory with phonegap

Leave a Comment