Francisco Deus, Designer & Developer from LisbonI design and build user interfaces.

Hello. I'm Francisco Deus.
Designer & Developer, from Lisbon.

Website Optimization Workflow: GruntJSOctober 17th, 2013

Usually the last step on any web project I take on, is optimisation. There’s a ton of action you can take to optimize any website. Some good friends of yours might be the Chrome DevTools, Google Page SpeedGT MetrixPingdom Website Speed Test. These give you good advices to optimize your website. Do as much of those as you can.

For me, there are some tasks that are a pain. For example, I was manually minifying css and javascript files, and optimizing images. This meant, I had to minify each file individually. And for images, I was using ImageOptim.app, which was OK, but could be better.

Fortunately, there’s an easy way to do all of this, with just a simple command.

Meet Grunt

GruntJS is a huge help to automate processes and it’s time saver! Basically, Grunt is a task runner. So you list the tasks you want grunt to run, configure those tasks, and then run grunt. You’re life got easier with a few simple steps.

There are a lot of Grunt plugins. Take a look at the official plugins from GruntJS, to see what’s already available.

I’m going to show you how to set up grunt and to run 3 tasks in one go. First, we need Node.js, so download and install it. After this we can use Node npm to install all we need.

Let’s get started with grunt (I’m on a Mac, so some commands might defer):

sudo npm install -g grunt-cli

Next we must navigate to the project folder and create a package.json and a Gruntfile.js.

package.json is used so Node.js knows all the dependencies your project has, and download any that are missing from the project. The Gruntfile.js is used to configure all the tasks we want Grunt to run.

touch package.json Gruntfile.js

This is what I want to do:

  1. Minify JS files (aka uglify)
  2. Minify CSS files
  3. Optimize Images

Here are the contents of my package.json:

{
  "name": "franciscodeus-website-optim",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-cssmin": "~0.6.2",
    "grunt-contrib-imagemin": "~0.3.0"
  }
}

(For more information, follow this Getting Started tutorial)

We now need to configure each task. Let’s start with the uglify task:

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: {
        files: [{
            expand: true,
            src: '*.js',
            dest: 'public_html/static/js/',
            cwd: 'public_html/source/js/',
            ext: '.min.js'
        }]
      }
    }
  });

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

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

};

After this, we only need to call grunt or, if we have more tasks on the Gruntfile and want just to run the uglify: grunt uglify
This will grab all .js files inside the directory public_html/source/js/, uglify and send them to public_html/static/js/ with the extension .min.js.

Let me show my complete file:

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: {
        files: [{
            expand: true,
            src: '*.js',
            dest: 'public_html/static/js/',
            cwd: 'public_html/source/js/',
            ext: '.min.js'
        }]
      }
    },
    cssmin: {
      options: {
        report: 'gzip'
      },
      minify: {
        expand: true,
        cwd: 'public_html/source/css/',
        src: ['*.css', '!*.min.css'],
        dest: 'public_html/static/css/',
        ext: '.min.css'
      }
    },
    imagemin: {
    	dynamic: {
    		options: {
    			optimizationLevel: 7
    		},
    		files: [{
		        expand: true,
		        cwd: 'public_html/source/images/',
		        src: ['**/*.{png,jpg,gif}'],
		        dest: 'public_html/static/i/'
    		}]
    	}
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');

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

};

 

Run grunt and you’re ready to deploy!

 

More Resources:

GruntJS Getting Started
Get Up And Running With Grunt.js
Start using GruntJS

Tags: , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *