Grunt JavaScript Task Runner

Step 6: Web Server

If you already have grunt-cli installed, run the following to update the package to the latests version.

# update grunt
$ npm update -g grunt-cli

Install the grunt-contrib-connect plugin to run a static web server over http.

# install grunt plugin
$ npm install grunt-contrib-connect --save-dev

Update the Gruntfile from page 1 to configure, load and run the connect server in addition to the existing default tasks. The connect server configuration will launch a server in the default browser at http://localhost:8000 when the connect:server task is run.

Add the connect web server configuration object.

connect: {
  server: {
    options: {
      port: 8000,
      hostname: 'localhost',
      open: true
    }
  }
}

Add grunt-contrib-connect loading and connect:server task registration.

// Load the plugins.
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['uglify', 'connect:server', 'watch']);

View the updated Step 6 Gruntfile.js

Step 7: Live Reload

Live reload automatically refreshes the browser when changes are made to the file system. Included with the grunt-contrib-connect plugin is connect-livereload making this task easy to add to the existing Gruntfile.js

Gruntfile.js

The updated Gruntfile with livereload: true added to both the watch and connect:server options.

module.exports = function(grunt) {
  'use strict';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      dev: {
        // http://compass-style.org/help/tutorials/configuration-reference/#configuration-properties
        // these options will override (or extend) config.rb settings.
        options: {  
          cssDir: 'build/css/',
          sassDir: 'src/sass/'
        }
      }
    },
    // connect web server configuration
    connect: {
      server: {
        options: {
          port: 8000,
          hostname: 'localhost',
          open: true,
          livereload: true
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/js/*.js',
        dest: 'build/js/<%= pkg.name %>.min.js'
      }
    },
    watch: {
	  options: {
		livereload: true
	  },
      css: {
        files: '**/*.scss',
        tasks: ['compass']
      }
    }
  });
  // Load the plugins.
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // Default task(s).
  grunt.registerTask('default', ['uglify', 'connect:server', 'watch']);
};

This project is available for browsing and download at GitHub:
https://github.com/jimfrenette/GruntTutorial

Grunt Tips and Tricks

Published by

Jim Frenette

Web Developer – views here are my own except those taken from people more clever than me.

Loading Disqus Comments ...
Loading Facebook Comments ...