Yeoman bower install vs npm install vs grunt

Question

This is my first time developing an AngularJS app and using the scaffolding tool Yeoman (http://yeoman.io/). I wanted to use fontawesome for some of my icons (http://fortawesome.github.io/Font-Awesome/) and I know I should use the command

bower install fontawesome

However, I also saw this article (https://www.npmjs.org/package/grunt-font-awesome-vars) that talks about npm grunt install command below

npm install grunt-font-awesome-vars --save-dev

What is the difference there? I'm still a little fuzzy on how the variety of tools work and flow together. Could any Yeoman experts give me a low down when to use bower install, npm install, and the grunt commands so I would know the differences clearly and understand the flow? Thanks.

Answer 1

Grunt is a task automation tool that does very little straight out of the box. It does most of its work through plugging in grunt modules that perform specific tasks.

grunt-font-awesome-vars is a module for grunt (useless without grunt)

bower is a package manager.

npm is a package manager.

(I don't use Yeoman. It's a scaffolding tool for setting up your project structure. I don't agree with its opinions on where things should go, so I don't fool with it. I configure grunt and bower manually)

Quick and dirty:

install node with npm. Then from your console, (Developer Command Prompt for VS2013, Bash, or whatever you use) run the following commands

npm install grunt --save
npm install bower --save
npm grunt-font-awesome-vars --save

bower doesn't need grunt. grunt doesn't need bower. grunt doesn't need grunt-font-awesome-vars but grunt-font-awesome-vars needs grunt.

With the way my work flows, I use npm to manage package dependencies that I want to automate with grunt. I use bower to manage the versions of my client dependencies.

More information:

There's a "Yo, Dawg" to describes bower that comes to mind when someone asks the difference between it and npm.

"Yo, Dawg. We heard you really like packages so we installed a package manager inside your package manager."

Basically, bower is just another package manager. It is installed with npm (which is a separate package manager)

I use npm for managing tooling and server dependencies (like grunt, grunt modules, sass, etc...things I potentially want to be automated) and bower for functional, client specific dependencies (like angular, jquery, etc...things that I potentially want to keep up to date with current version)

Installing through bower will utilize your bower.json. Installing through npm will utilize your package.json.

npm install grunt-font-awesome-vars --save-dev

will install grunt-font-awesome-vars as well as update your package.json with a devDependency(the --save-dev flag does that) so that it is automatically installed any time you perform an

npm install

if you change that command to

npm install grunt-font-awesome-vars -g

it will install grunt-font-awesome-vars to your node install location (indicated by your PATH system variable) and be available to all node instances.

Edit to answer question from comments

Asked: Also, why is there the need to have the install command as 'grunt-font-awesome-vars -g'

grunt-font-awesome-vars is the name of a module for grunt that is deployed as a node package. You install grunt modules with the "npm install" command. -g is a flag that instructs npm to install the requested package to global space, by making it available through your PATH variable. The only things that I currently have installed globally are http-server, bower, and karma. If you don't have packages installed globally, then you will have to have performed an "npm install" of that package at the current working directory in order to execute the commands of that package. For instance, http-server is a node module and is executed command line just like any other console application. In this case, the command "http-server" will start a local http server anywhere you want to serve a site from. If I install it to my PATH, I can run http-server from anywhere I want without having to do anything special. If you don't install it to your PATH, then the http-server executable must be in the directory in which you are wanting to run it. I install it globally so that I never have to "npm install" it again. Most things you will want to package with your project and that you can do with the --save flag rather than the -g (or --global ...they do the same thing) flag.