5 Steps to running your first Grunt task – Beginner Grunt Tutorial

This is my beginner grunt tutorial to get you started with grunt as simple as possible. I will show you in 5 steps how to get your first Grunt task to run. The task we picked here is to minify a js file. All the files to run this demo can be found at:
{filelink=28}
{filelink=29}
{filelink=30}

This demo uses the same code as: http://gruntjs.com/getting-started.

Abbreviations for the Beginner Grunt Tutorial

These are the abbreviations I use during this tutorial:

cmd: Command line.

$ This command is typed in your command line

Beginner Grunt tutorial in 5 steps

1. Install node.js http://nodejs.org
2. Install Grunt command line (CLI) npm install -g grunt-cli
3. Go to your root folder of your project. Save files: {filelink=28}, {filelink=29} and {filelink=30} (sample file).
4. Use npm install to get grunt and all dependencies via your cmd. Make sure you are in the same folder you saved all the 3 files from step 3. npm install
5. Run grunt in cmd grunt

You should now see my_code.min.js if everything worked.

You have successfully run your first Grunt task!

Did this work for you? Please let me know in the comments below. If you ran into a problem pls check out the troubleshooting below.

5 Steps to running your first Grunt task video

(coming soon)

Trouble Shooting the 5 steps

Here are the same steps as above, but this time with hints on how to check whether you completed a step. I will use

check

To demonstrate what method you can use to check whether your system performed a step correctly. I will use the symbol $ to showcase what command to type in your cmd.

$ command in cmd

and no $ to showcase what the output may look like.

sample output

1. Install node.js http://nodejs.org
   check
   $ node -v v0.10.24

2. Install command line interface npm install -g grunt-cli

   check

   $ grunt –version

   grunt-cli v0.1.11

3. Go to your root folder of your project. Save file: package.json, Gruntfile.js and my_code.js

4. Install all dependencies in cmd in the same folder you saved package.json npm install

   check
   $ grunt –version grunt-cli v0.1.11 grunt v0.4.2

5. Run grunt in cmd grunt

   check

   File my_code.min.js got created

Still not working? Please let me know in the comments below.

Next steps with Grunt

The next step is to learn how to setup your own Grunt tasks. Should you be interested in WordPress Frontend Developer Tools, check this out.