Grunt Tutorial

This is a quick introduction to working with Grunt.

What is Grunt?

Grunt is a tool that is used to automate certain tasks for a developer, such as CSS file concatenation, minimizing images and unit testing. These tasks have traditionally been handled by developers in order to ensure a website's or application’s performance. With tools like Grunt we can automate these processes and focus on more important tasks when building software.

Prerequisite:

You will need a basic knowledge of JavaScript. You will also need to be familiar with your operating system’s command prompt. Understanding of how to navigate file structure and perform basic tasks is important to using Grunt.

How to get started?

1. In order to get started with your own handy-dandy automation tool, go to http://nodejs.org/ and download the latest version of Nodejs.
2. Once Node has finished installing on your machine, open your computer's 'command prompt' and type in 'npm install –g grunt-cli'. This command tells Node Package Manager (npm) to globally install (-g) Grunt's (grunt) Command Line Interface (-cli). This is basically a fancy way of telling your machine that we would like to start using Grunt.
3. After you’ve installed the Grunt CLI globally, go to http://gruntjs.com/plugins and choose a plugin that you would like to use inside of a project. For this tutorial I will be using the plugin "uglify" at https://www.npmjs.org/package/grunt-contrib-uglify.This plugin is used to minimize JavaScript files that are ready for production.
   
   1. Once you’ve chosen the plugin you want to use, create a new JavaScript file and name it ‘gruntfile.js’.
   2. Within your command prompt, navigate to where you created your gruntfile. In my example I created my gruntfile within C:\xampp\htdocs\baysite\js.
   3. ‘gruntfile.js’ is used to tell Grunt what we want it to perform. In this case, we are going to tell Grunt to read our ‘package.json’ file, minimize the JavaScript files that we specify and place the minimized versions within a destination folder of our choosing.
4. Write your code in ‘gruntfile.js’ that you want to be executed. For this tutorial I will be using this snippet:
   
   ============
   module.exports = function(grunt) {
     // Project configuration.
     grunt.initConfig({
         // Tell Grunt about our package.json file.
       pkg: grunt.file.readJSON('package.json'),
         //create our uglify task
       uglify: {
         my_target: {
         // Tell uglify about our Javascript files that we want to minimize.
           files: {
             'main.min.js': []'js/main.js']
           }
         }
       }
     });
   
     // Load the plugin that provides the "uglify" task.
     grunt.loadNpmTasks('grunt-contrib-uglify');
   
     // Default task(s). This is the task(s) that is run when grunt is run in the command prompt.
     // Use if you don't want to specify a specific task.
     grunt.registerTask('default', []'uglify']);
   
   };
   
   ============
5. Reopen your command prompt and type in ‘grunt uglify’, or simply ‘grunt’. We don’t need to specify a task for Grunt because we registered our default task to ‘uglify’. After this task is complete, Grunt should read your ‘main.js’ file and minimize it.

You’re done! Hopefully this gives you an idea of the capabilities of Grunt. It is a quick, simple, reusable and convenient way of doing tasks to improve your site. So, find new plugins and start building!