Why Grunt?

Having spent a lot of time in Visual Studio working on ASP MVC sites I hadn’t had a chance to really get my head around the new tools around managing dependencies and running build tasks because Visual Studio does a lot of that for you, with bundling and NuGet etc.

However  work dictated that I had to spend some time working on a WordPress theme which meant leaving the comforts of Visual Studio behind.

I have come to prefer Brackets as my text editor because of its simplicity and extension support. I had plugins that would minify JavaScript when saving as well as a LESS compiler which helped automate some of the common tasks but was far from perfect.

What made me investigate Grunt properly was the laborious process I was performing to make changes to the WordPress theme. At the same time I was working my way through the new Smashing Magazine’s Book “Real life: Responsive Web Design” which included an article explaining Grunt for people like me.

I already had Node installed so I was ready to have a go at grunting.

Grunting 101

In the root folder of your project you will create a few files that will keep track of what dependencies you have added to your project as well as to tell Grunt what you want it to do.

So first off you need to get NPM up and running so we can install grunt. assuming you already have Node setup all you need to do is run in a Command Prompt from within your root folder:

npm init

This will guide you through creating a package.json which tells NPM your projects dependencies. You can just keep pressing enter to power through it.

Next up we need to add Grunt as a dependencies so we can start automating. This is once again a single command

npm install grunt --save

The “–save” flag is important because it adds the dependency (Grunt) to the package.json. This means that when someone else comes along to work on your project. they just have to type “npm install” and all the project’s dependencies will get installed.

The next step is a little annoying, because unlike NPM, Grunt doesn’t have a “init” command so you have to create a new file in the root folder called “Gruntfile.js”. Your best step next is to copy the example grunt file from the grunt website or below:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! < %= pkg.name %> < %= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/< %= pkg.name %>.js',
        dest: 'build/< %= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

Adding useful stuff

The example above uses a Grunt task called “Uglify” which can minify your JavaScript. Before this configuration will work you will need to install the Uglify NPM Package.

npm install grunt-contrib-uglify --save

That should do it. Now you can run:

grunt

Grunt will process it’s config and proceed to run “uglify”. Its likely that the task failed because your need to edit the config to fit your project setup.

This is the basic workflow of adding Grunt tasks.

1. Install grunt package using NPM not forgetting the –save flag
2. Add task to initConfig. An example of the config is almost always included in the readme of the package
3. Tell Grunt to load the NPM package with

   grunt.loadNpmTasks("package-name");

4. Add the task to the default registered task by adding it’s name (“uglify”) into the array [‘task1’, ‘task2’]

   grunt.registerTask('default', ['uglify','package-name']);

Get Grunting

Once you get the hang on of it, these tools can be extremely powerful. After a few hours of messing around I was able to:

• Copy the files I wanted to deploy into a build folder
• Combine and minify the JavaScript
• Optimize images in the project
• Deploy the output using SSH to the test server
• Automate the whole process when a file in the source directory changes!

I will follow this blog post with a walk through of the Grunt file that handles all of this.  I hope this has inspired you to go and try out Grunt and NPM and in no time at all your be able to tell me all the cool things I have naively omitted.