16
Oct
2014

Automate Your Website Build With Grunt

posted Thursday, October 16th 2014 at 8:16 AM by

Grunt Logo

I've been doing a lot of website work lately, lots of which includes repetitive tasks like minifying CSS and Javascript assets after making changes. Which is an inefficient use of time and can lead to mistakes. And I'm only one guy, having a team of developers all trying to manage the same repetitive tasks and get a consistent, high quality product gets to be a headache unless you use some kind of automation.

Here's how to automate those tasks using Grunt. For the quick start guide, check out the Getting Started page over at the Grunt website.

Step 1: Get The CLI

First, make sure you have the command line interface (CLI) by running "npm install -g grunt-cli" from the command line.

Step 2: Prep Your Grunt Tasks

Every Grunt setup has two components, the package.json and the Gruntfile.js. The first, package.json, defines the project and its dependencies. Here's the example package.json I'm working with.

{
  "name": "Minify-Scripts-and-Syles",
  "description": "Minifies CSS and Javascript",
  "author": "Adam Konieska (http://www.adamkonieska.com)",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x"
  },
  "engine": "node >= 0.10",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

The exciting ones in there are "cssmin" and "uglify" to minify css and javascript respectively. There are other components listed that can be used to develop more advanced tasks, but won't be covered in this tutorial. Save the package.json file in your working directory. For this tutorial, I'm using C:\Users\Adam Konieska\Desktop\adamkonieska.com as my working directory.

Step 3: Install dependencies in your working directory

In windows, use the command prompt and navigate to your working directory. Once there, run "npm install". This will tell the CLI to look at your package.json file and make sure all the appropriate dependencies are downloaded and available in your working directory. If you get a bunch of errors later on, its likely something went sideways in this step.

Step 4: Build your gruntfile

Open a blank text document in your editor of choice, and save it as Gruntfile.js in your working directory. Below is the example I'm working with to minify my CSS and Javascript. A more detailed breakdown is below the code.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/* Minified for your viewing pleasure.  - Adam Konieska */\n'
      },
      build: {
        src: 'includes/js/main.js',
        dest: 'includes/js/main.min.js'
      }
    },
    cssmin: {
      options: {
        banner: '/* Minified for your viewing pleasure.  - Adam Konieska */\n'
      },
      build: {
        src: 'includes/css/style.css',
        dest: 'includes/css/style.min.css'
      }
    }
  });

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

  // Default task(s).
  grunt.registerTask('default', 'My "default" task description.', function() {
    grunt.log.writeln('Currently running the "default" task.');
    grunt.task.run('uglify');
    grunt.task.run('cssmin');
    grunt.log.writeln('Grunting complete!  Have a nice day.').ok();
  });


};

module.exports = function(grunt) - This is the grunt function. All your tasks need to happen in here.

grunt.initConfig - This JSON snippet contains the info for your tasks.

uglify: {} - This is the definitions for the uglify task.

uglify: { build: {}} - This is the specifics for what to minify, and where to save it. src is the source file, and dest is the destination file.

grunt.loadNpmTasks() - The function used to load the dependencies for a task you want to run.

grunt.registerTask() - Here is where I register the default task, and use it to call other tasks.

grunt.task.run() - This is used to call grunt tasks, in this example the 'uglify' and 'cssmin' tasks defined earlier are called.

Step 5: Run the grunt script

Back to the console window, this time from your working directory, just type "grunt". Your gruntfile will log anything you've told it to in the console window, and when complete you'll get a success message.

From there, verify the output. Check the destination files to make sure everything minified correctly.

Advanced Grunting

While this is a simple example, more complex grunt scripts can be developed to merge files, create a build directory and wipe it after complete, and copy files to a production directory. Check out some of the advanced task examples at the Grunt website.

Final Thoughts

Automating the process is awesome because it reduces time spent doing repetitive tasks. That means getting a consistent product, even across a team of multiple developers, and reducing the chance for mistakes. Grunt on my friends, Grunt on!

Share This:

Tags:

Comments:

View (0) Comments Post a Comment
  • Replying to Adam Konieska on Automate Your Website Build With Grunt