Home 5 Steps to running your first Grunt task – Beginner Grunt Tutorial
Post
Cancel

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 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

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
    $ node -v v0.10.24
  2. Install command line interface npm install -g grunt-cli

    $ 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

    $ grunt –version grunt-cli v0.1.11 grunt v0.4.2
  5. Run grunt in cmd grunt

    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.

This post is licensed under CC BY 4.0 by the author.
Trending Tags