Difference between Grunt and Bower dependecy

I am new to whole front-end tooling and I am trying to start a new jquery plugin project. So, with Grunt I used grunt-init-jquery to make me a boilerplate jquery plugin project and it already has unminified versions of client framework dependecies as well such as jquery and qunit.

It also generates package.json which I can edit to contain dependencies so, how does Bower fit here? or is optional and I can handle both server and client side dependencies with Grunt only?

the package.json from grunt lists your dependencies for the grunt tasks. in contrast bower is a package manager like npm or composer which you can use to manage your client side dependencies (e.g. jQuery, bootstrap, and various other js/css libraries).


Well, more than just Grunt may read your package.json, what bower does is a bit more-- if a package you (or grunt) wants itself depends on another a package, bower will know this, fetch it for you, and I believe it should also update your package.json as well. There are more and more projects who list other projects as dependencies-- I recently ran into the issue where yeoman was setting up some angular thingie for me and the angular thingie wanted a testing framework called karma. Now due to a known bug, karma is never called, but ideally this is the kind of thing bower would deal with for you.

Otherwise, you’d be running everything, waiting for an error message telling you “X is not found” or whatever, installing that, running again and waiting for another error message… bleh.

1 Like

@Dormilich @Stomme_poes Thanks for your replies. I get that. But when I grunt-init-jquery it created a folder called libs and had unminified versions of 3rd party libs like jquery and qunit as dependencies I presume.
Why did Grunt bring those? It is not a package manager and do I do another bower install over this and install jquery and qunit again?

Whoever made grunt-jquery had the qunit stuff added in apparently.

developer says there it’s including qunit tests, so he made a single “package” containing two things.

When I was playing with bower and I was constantly (re) trying to install karma, it seemed like things just kept getting re-installed, but I would expect a real package manager to check first, and only install if the versions are too low/old.

Grunt isn’t a package manager, and usually you have to manually install the things grunt runs. Usually first you have to do
npm install name-of-package --save-dev

package.json is just a list that Grunt knows how to read (also Bower reads it), that lists what you’ve supposedly already got, and which version.

Even adding that name-of-package to your loadNpmTasks list, if you didn’t install it, it won’t run.

So if Bower seems to really be re-installing jquery etc, then I dunno what’s going on, since supposedly they all use node-modules to store all their stuff and package.json to keep track of what’s installed.