How to use grunt? – A build tool for web development

Grunt LogoDuring the web development process, there are bunch of tasks that you’ll be doing regularly. Minifying files, concatenating files, compiling sass or less to CSS, unit testing and linting JS files are some of them. Grunt helps to make these regular tasks automated. It saves lots of time and energy, it has bunch of built-in tasks that make front end development easy.

Getting Started with grunt

Grunt is built on node.js; It is available as a package in the NPM (Node Package Manager). To use grunt, you need to have node.js installed in your machine. But you can use grunt with any app like node app, any MVC app, wordpress app or just plain HTML/CSS/JS app.

Start Grunt installation

Before starting the grunt, first install node.js in your machine. Grunt is a package of npm, and npm comes with node.js; separate installation is not required. However npm gets updated frequently. Make sure, you have updated npm installed.

After the node.js installation, you need to install grunt package in your machine. You can install it globally with the flag '-g' in the command window. It can be used, in any project in your machine, when you install it globally. Open node.js command window and run the command. To know difference between local and global installation refer my last post

To install any package globally, you need to run node command window as administrator.

Installing required grunt packages

All the required packages need to be there in the package.json file. If package.json is not available then run the command 'npm init' in the command window. It will add the package.json file. Now you can either add all your required packages in the package.json (as shown below) , and run the command 'npm install'; it will install all the given packages…

…or you can install all the required packages using the flag '--save'

Now, you can start writing grunt.js file

In this grunt file, we have set the configuration for converting sass to css. You can add as many tasks as you want here. But make sure the grunt plugins used are loaded, using the method 'grunt.loadNpmTasks()'

Now, to run this task run the command 'grunt sass' in the command window. Similarly you can run other defined tasks. Like, 'grunt cssmin', 'grunt uglify' and so on…

You can run multiple tasks with one command

By defining default task, you can run multiple tasks with one command.

Now, you need not to run different tasks separately. Just run the command 'grunt' it will run all the default tasks with one command.

You can create different tasks for different environments

We may require different tasks for dev and production environment. For e.g. some tasks to be run on the dev environment but not in the production environment and vice versa.

Now, you can run the different tasks with the different commands.

You can set the different environment in your default tasks list also.

Now, to run these default tasks for different environment, run the command.

Running a task when a file is changed or saved

You can run a watch task, which will watch all the specified files, as and when a file changes it will run specified tasks.

Now, running the command 'grunt watch' will watch all the JS files in modules folder and scss files in sass folder. As and when any files changes in these folders tasks – concat, sass and cssmin will run itself.

Some references

Leave a Reply

Your email address will not be published.