Grunt Tutorial 2 — Setting up Grunt to a project

To install grunt you need some prerequisites.

  • Step 1 — Install NodeJS to your computer.

We will not use node.js here, but we are installing it to get “node package manager(npm)” . We will use npm to install grunt and grunt tasks in our project.

  • Step 2 — Open terminal, navigate to your project and install grunt and grunt-cli.
npm install grunt grunt-cli

Note: Install packages with npm (npm install <packages with space separated>).

Note: After installing grunt and grunt-cli, you will see a folder called node_modules created.

  • Step 3 — Create a file called gruntfile.js in the root directory.

Note: Don’t worry about the other two files (bower.json and package.json). It’s not necessary for this post. But make sure you have the gruntfile.js is in the root directory of your project.

  • Step 4 — Write the skeleton. Before we start writing any tasks we should add the basic building block.

Note : “initConfig()” is the most important method. Here we pass an object with all the task configurations. Don’t panic if you don’t understand this. You will understand everything once we run tasks with grunt. So let’s write tasks. In this post I will show you how to get 6 different tasks running with grunt. Those are : “jshint”, “concat”, “cssmin”, “uglify”, “sass” and “watch”.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.