What are npm, bower, gulp, Yeoman, and grunt good for?

Question

I'm a backend developer, and slightly confused by npm, bower, gulp, grunt, and Yeoman. Whenever I ask someone what their purpose is, the answer tends to boil down to dependency manager - for all of them. Surely, we don't need four different tools that all do the same?

Can someone please explain what each of these is good for in as few sentences as possible - if possible just one per tool, using language a five year old (with development skills) could understand?

For example:

• SVN stores, manages, and keeps track of changes to our source code

I have used maven, Jenkins, nexus and ant in the past; maybe you could compare the tools above to these?

Also feel free to add other front-end tools to the list.

Here is what I have found out so far - not sure it's correct, though:

• bower dependency manager for front-end development/JS libraries, uses a flat dependency list
• npm dependency manager for node.js server, can resolve transitive dependencies/dependency trees
• grunt runs tasks, much like Jenkins, but locality on the command line
• Yeoman provided scaffolding, i.e skeleton projects
• gulp same as grunt, but written in js only
• node.js server for js apps?
• git decentralized SCM/VCS, counterpart to svn/cvs

Am I close? :)

Answer 1

You are close! Welcome to JavaScript :)

Let me give you a short description and one feature that most developers spend some time with.

bower Focuses on packages that are used in the browser. Each bower install <packagename> points to exactly one file to be included for (more can be downloaded). Due to the success of webpack, browserify and babel it's mostly obsolete as a first class dependency manager.

2018 Update: bower is mostly deprecated in favour of NPM

npm Historically focuses on NodeJS code but has overthrown bower for browser modules. Don't let anyone fool you: NPM is huge. NPM also loads MANY files into your project and a fresh npm install is always a good reason to brew a new cup of coffee. NPM is easy to use but can break your app when changing environments due to the loose way of referencing versions and the arbitrariness of module publishing. Research Shrink Wrap and npm install --save-exact

2018 Update: NPM grew up! Lot's of improvements regarding safety and reproducibility have been implemented.

grunt Facilitates task automation. Gulps older and somewhat more sluggish brother. The JavaScript community used to hang out with him in 2014 a lot. Grunt is already considered legacy in some places but there is still a great amount of really powerful automation to be found. Configuration can be a nightmare for larger use-cases. There is a grunt module for that though.

2018 Update: grunt is mostly obsolete. Easy to write webpack configurations have killed it.

gulp Does the same thing as grunt but is faster.

npm run-script You might not need task runners at all. NodeJS scripts are really easy to write so most use-cases allow for customizedtask-automation workflow. Run scripts from the context of your package.json file using npm run-script

webpack Don't miss out on webpack. Especially if you feel lost on the many ways of writing JavaScript into coherent modular code. Webpack packages .js files into modules and does so splendidly. Webpack is highly extensible and offers a good development environment too: webpack-dev-server Use in conjunction with babel for the best possible JavaScript experience to date.

Yeoman Scaffolding. Extremly valuable for teams with different backgrounds as it provides a controllable common ground for your projects architecture. There even is a scaffolding for scaffolds.

Answer 2

So, Since you have a good idea what each is, I will give you a simple workflow.

1. I use yeoman to scaffold a basic skeleton.
2. I am using node as the runtime for my application. ie. run node appname
3. I use npm to install node modules for helping me write the application in node
4. I might need some component from bower like front-end libraries so use bower to fetch these.
5. Now to do some repetitive task I will use grunt or gulp to write some tasks. So everytime I want to repeat it, say minimify my js files I call grunt/gulp and make them do it. Difference you ask, Gulp is stream based while grunt is task based.
6. I do version control using git to keep track of changes

Answer 3

1. Gulp vs Grunt: Gulp provides more flexibility with task automation, Grunt comes built in with a lot of functionality as per the common development practices. There are two main differences between Grunt and Gulp:

   • Grunt focuses on configuration, while Gulp focuses on code
   • Grunt was built around a set of built-in, and commonly used tasks, while Gulp came around with the idea of enforcing nothing, but how community-developed micro-tasks should connect to each other Read here

---

2. NodeJS: It is a Non-blocking server-side scripting language. Which means operations won't block further execution until current operation finishes.

---

3. Git: As you mentioned it is an SCM tool, a widely used one. As per the GitHub docs it is different from other SCM tools as data is never deleted.

   Git thinks of its data more like a set of snapshots of a mini filesystem. Every time you commit, or save the state of your project in Git, it basically takes a picture of what all your files look like at that moment and stores a reference to that snapshot.

   When you do actions in Git, nearly all of them only add data to the Git database. It is very difficult to get the system to do anything that is not undoable or to make it erase data in any way. As in any VCS, you can lose or mess up changes you haven’t committed yet; but after you commit a snapshot into Git, it is very difficult to lose, especially if you regularly push your database to another repository.

   Read More

---

4. Bower vs NPM : Bower and NPM are dependency managers but Bower modules are for front-end development. NPM is a huge collection of modules to be used with NodeJS backend. This SO answer covers it better