Minimal grunt setup for a local server and live reload

README.markdown

Minimal Grunt Server and Live Reload

This gist provides a minimal setup for running a local server with live reload using Grunt (http://gruntjs.com/). It's mostly lifted from Yeoman (http://yeoman.io/), but is much more minimal and doesn't assume you will be using Bower, or running any kind of build script.

I have used this setup when simply developing HTML wireframes, since I don't care about having an app/ directory, uglifying anything, running tests, etc - I just want to be able to serve the HTML for cross device viewing, and also to use live-reload since that's very handy, especially for CSS changes.

Install

Simply place the package.json and Gruntfile.js in your project directory and run $ npm install.

You may want to change the value of the "name" key in the package.json to something more meaningful than "project".

Usage

Assuming you have everything installed, just run $ grunt server from the project directory.

Gruntfile.js

'use strict';

/**
 * This file is mostly pulled from the one generate by Yeoman 1.0 Beta
 **/

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.initConfig({

        watch: {
            livereload: {
                files: [
                    '*.html',
                    'styles/*.css',
                    'scripts/*.js',
                    'images/*.{png,jpg,jpeg}'
                ],
                tasks: ['livereload']
            }
        },
        connect: {
            options: {
                port: 9000,
                hostname: '0.0.0.0'
            },
            livereload: {
                options: {
                    middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, './')
                        ];
                    }
                }
            }
        },
        open: {
            server: {
                url: 'http://localhost:9000'
            }
        }
    });
    grunt.renameTask('regarde', 'watch');
    grunt.registerTask('server', function (target) {
        grunt.task.run([
            'livereload-start',
            'connect:livereload',
            'open',
            'watch'
        ]);
    });
};

package.json

{
  "name": "project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-contrib-livereload": "~0.1.2",
    "grunt-contrib-connect": "~0.3.0",
    "grunt-open": "~0.2.0",
    "grunt-regarde": "~0.1.1"
  }
}