by ravikiran perumalla

Month: February 2016

When we start learning MEAN stack, we get this question for sure. Even I asked the same question when I initially heard about these two tools. I thought they both does the same thing. To discuss this, First we need to know what these two tools does.

When we started developing every layer in Javascript, we need some tools to make our life easy. The most common one’s you need are, the dependency management and build management.

So, I would like to start with what they are…. then you would see the differences easily.

Assumption: Before you read further, I assume you already know how to use npm command and install packages like Grunt, Bower. (If no, try this link)

Bower works by fetching, installing packages and keeps them up to date.

Bower downloads the dependencies for you and installs them on the required path.

This installation could be as global module or project module.

Key Features

Bower runs on Git

Can be integrated with other tools like Grunt, Gulp etc.

Bower can manage any packages hosted on NPM platform

Can manage HTML,CSS, JS packages

In my view, whoever comes from Java,J2EE background can easily relate this to a Maven and its POM.XML to the bower.json file. In this file, you exactly give the same content what we give in Pom, the dependent libraries and their versions. This is very useful in later phases if you want to change the version of any library you are using just go hear and change the version. You are done. Even you can manually download the js file and keep it. To avoid this manual work and make developer’s life easy we need this tool.

Very commonly used for jobs like Minification of CSS, JS & run Unit test cases

Key Features

Grunt helps you run tasks based on configurations

Provides automation for different environments like Dev, Test, etc

Helps you to increase the performance of the application using different plugins

Helps you optimize images, minify file sizes, run unit tests

In my view, Grunt acts like our good old Apache Ant, where you used to define the tasks in BUILD.XML and run them based on the need. Very similarly Grunt helps you create your own tasks and run them based on the your requirement. Here we define Gruntfile.js where you define your tasks.

I think now, you got a better understanding of these two tools.

Now these two tools are meant for two different things. So, don’t get confused. We need both of these tools. Where as there are tools which are very similar to Grunt for eg. Gulp. We need more detailed comparison if we have to choose one of them.