Grunt for Front End Developers


Life has always been unfair to front end developers, as they have to do a lot of tasks which are indeed quite a task for them. They have to work in a lot disconcerted way and this is quite in a haphazard manner, such as-

  • Work with fragments of JavaScript and CSS and then assimilate it all to put them together so that they all can work in tandem on a website.
  • They have to minify JavaScript and compress CSS so as to make the file sizes, as small as possible so as to make a website lighter in size.
  • They have to carry out the optimization of images, so as not to affect the quality of the images without distorting the quality.
  • Next they also have to use Sass for CSS authoring for considering the abstractions it allows.

What is the answer to this plight? Well, I guess as every problem has a solution so do this. We now have Grunt, which is a panacea for this problem, as this is a task runner which can help you to carry on all the tasks easily. All you need is to easily set it up which is certainly not a difficult task and you can easily install it and all your tasks can be accomplished very smoothly.

Though it is really very difficult to adapt new changes, but yes  change is unavoidable and one can never grow until you are prone to changes. In this blog we will discuss how using Grunt can help us save time and evolve in the technological era.

Get Set Grunt

The Node is a primary requirement for Grunt. You need to first install Node, but do not worry if you haven't installed it yet, as it is not a very arduous task. All you need to do is to download an installer and run it . You need to go to the node website and just click on the big Install button on it.
Grunt is installed on a project basis. You need to go to the project's folder. At the root level you will get a file named package.json. You need to create one file and keep it over there. The file should contain the following code.

    "name": "example-project",
    "version": "0.1.0",
    "devDependencies": {
         "grunt": "~0.4.1"

You can certainly take inspiration from this code and change the version and project bit the devDependencies are ought to be same.

There is a package manager called a  NPM (Node packaged modules ) for managing Node dependencies. For instance, you can take it as a plug-in for WordPress. This is the way how node takes care of dependencies.

After keeping the package.json file in the requisite place, you need to visit the terminal and then go to the folder.

Then after you need to run this command:

npm install

After running this command, a new folder named as node_modules will come up in your project. Along with this you will get two more files, such as LICENCE and READ.ME. These files are there as the project will be kept on GitHub and this is the standard file system there.

Now, after completing all the other step, we have the culmination step where we have to install command line interface of  Grunt. The absence of this will lead you to a style error of  “command-not-found”. It is installed in order to improve the efficiency of the interface. Else, if you have to make ten projects, then you would have ten odd copies of Grunt CLI.

All you need to do to install CLI is just open up the terminal and run a single line command :

npm install -g grunt-cli

After running this you all you need to do is to close and open the terminal again in order to ensure that whether the things are working perfectly.

Some Features of Grunt

One can certainly not deny the fact that we front end developers do not have to do all that stuff discussed in the very beginning of the article in order to make our websites look perfect and these things are an indispensable part of our life. It is certainly obvious that you need to go to various other tools for developing the best web product. This unarguably is a very time consuming process and this is why we must switch to Grunt. After using Grunt you will yourself realize the fact that there is a lot of difference in doing a job in a fragmented way and in a synchronized and collective way.

Grunt can -

  1. Grunt can concatenate your files.
    Let us suppose that there are two different JavaScript files in a project namely:
    - jquery.js – The library which we need.
    - global.js – Our authored JavaScript file where we configure and call the plug-in.With the help grunt one can concatenate these files together  in order to improve the performance of our project.
  2. Grunt can optimize images:
    In order to optimize images Grunt uses grunt-contrib-imagemin, which you need to install using:

    npm install grunt-contrib-imagemin --save-dev

    Then you need to register it in the  Gruntfile.js


    In order to configure it you need the following code:

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'images/build/'

    After configuring it, run it:

    grunt.registerTask('default', ['concat', 'uglify', 'imagemin']);

    This is one of the most minimalistic effort one can apply in order to optimize the images. Other than this Grunt can help you to easily Minify your JavaScript, makes processing faster and automates the development.

Why Grunt

Another most advantageous thing about Grunt is the consistency it induces to the development teams. As we know that development is not done single handedly, but requires teams to work in a collaborative manner. The inconsistency at times can prove to be one of the most disgusting things. This is where the role of Grunt comes in. Using Grunt one can ensure that all the teams are writing the code in a standard way. This helps you save your build from failing as a lot of efforts are put in while making a build.

Wrapping Up

Do not take Grunt as a newbie market entrant in the development world. After all it has a big community of programmers, which are responsible for making new plugins and updates every now and then. Moreover, there are already a lot of tools provided by grunt which makes any new market entries of this type very less.