Introducing and Installing Grunt Task Runner

This post is part 1 of 2 in the series Goin Hog Wild with Grunt

  1. Introducing and Installing Grunt Task Runner
  2. Configuring the package.json and Gruntfile.js files

Video Transcript

Hi, my name is Mike McLin and in this video series we are going to be talking about Grunt. Grunt is a JavaScript Task Runner. So, what does that mean exactly? Well, the tool is built with JavaScript, and runs on Node.js. You do not need to know any JavaScript or know anything about Node.js to use the tool however. OK, so what is a task runner? A task runner performs automated tasks like compilation, linting, unit testing, concatenation, minification and so on. Let’s take a look at this tool in action.

Grunt Task Runner Example

I am currently in my project’s directory using my command line tool. All, I need to do is type the word “grunt”, and the default task runner begins. After just a few seconds, it has completed. So, what has Grunt done for us?

What did Grunt.js do for me?

It ran my JavaScript files against JSHint to make sure they are lint-free, executed all of my JavaScript unit tests, cleaned up my production JavaScript directory, concatenated all of my jQuery plugins and 3rd party JavaScripts into one file, minified all of my JavaScript files and saved them in my production directory, cleaned up my production image directory, crunched all my source PNG and JPEG images and saved them to the production image directory, copied my gifs to the production directory, compiled all of my SASS files into a single CSS file, added the necessary WordPress comment block to the top of my style.css file and saved it to the production directory, and finally cleaned up some image sprites that were no longer needed. It basically completed tasks that would have totaled a couple minutes of work on my end, in only a few seconds. Also, please note that I have only setup about 6 or 7 tasks compared to the hundreds of tasks that Grunt can perform.

The beauty of this tool is not only the speed, but the ease of use. Now, anybody that works on your project will not need to know how all of your tools work. Instead, they just have to type the word “grunt”, and the task runner will perform the tasks for them which will lead to more consistent, higher-quality content.

How to Install Grunt.js Task Runner

We will end this video by installing the Grunt, which is extremely easy. First you need to make sure that your computer has Node.js installed. To install Node.js, simply head to the Node.js website and download the installer. Now install the program just like you would any other Mac or Windows program. Once installation is complete, you might need to restart your computer before installing Grunt.

To install Grunt, open up the command line tool of your choice. Now type in the command “npm install -g grunt-cli”. If the install fails, you most likely need to run the command as a superuser on Mac or an Administrator on Windows. This is very easy. On Mac, just type in the word “sudo” plus a space before the command. It will prompt you for your password. On Windows, open your command line by right clicking it and choosing “Run as Administrator”. Now type in the command, and everything should work appropriately.

So now that we have Grunt installed onto our computers, and we have a basic idea of what Grunt does, We’ll get started building our first Gruntfile in the next video…

View Transcript

Related Links

Grunt Task Runner
http://gruntjs.com
Node.js
http://nodejs.org

More posts from the 2-part series: Goin Hog Wild with Grunt

  1. Introducing and Installing Grunt Task Runner
  2. Configuring the package.json and Gruntfile.js files
  • HECTOR ARISTIMUÑO

    Thank you very much for the intro to Grunt. But how I can integrate my project?

    • Mike McLin

      I will be following up with more videos in this series (probably 5 or so in all). I’ll show several integration examples, from a generic website to a WordPress website. Eventually, I’ll also show how Grunt provides project scaffolding to build your project’s directory structure automatically. Thanks for the comment, and stay tuned :)

  • James Scholey

    Mike, this is a great video series. Thankyou for taking the time to put this together – really helpful. When can we expect part 3 to hit?

    • Mike McLin

      Thanks for the nice comments. It’ll be up this weekend. From then on, I’d like to complete at least one a week until complete.

  • Pingback: Einführungen in Grunt « F-LOG-GE()

  • http://jitendravyas.com/ Jitendra Vyas

    Waiting for 3rd video

  • http://geniuscarrier.com/ Yang Zhao

    Great video. Thanks Mike. I’ve also come up with a tutorial/demo for getting started with Grunt. Please check out: http://geniuscarrier.com/demo-getting-started-grunt/