Simple sites and Grunt

17 Jul

I occansionally deal with a strictly static web site setup, e.g.:

  •  index.html
  •  /images
  • /css
  • /js

and while it’s fun to either setup a new virtual host in apache or nginx, I’ve found it’s easier to just setup a simple grunt file.  The following gets it up and running, assuming the directory setup above.

  • npm install -g grunt-cli
  • put this package.json in /
  • npm install
  • put this Gruntfile.js in /
  • just run “grunt server” and away we go!


		"matchdep": "~0.1.1",
		"grunt": "~0.4.0",
		"grunt-regarde": "~0.1.1",
		"grunt-contrib-connect":  "0.1.2",
		"grunt-contrib-livereload": "0.1.1",
		"grunt-open": "~0.2.0"



module.exports = function(grunt) {

  // Load Grunt tasks declared in the package.json file

  // Configure Grunt 

    // grunt-contrib-connect will serve the files of the project
    // on specified port and hostname
    connect: {
      all: {
          port: 9000,
          hostname: "",
          // No need for keepalive anymore as watch will keep Grunt running
          //keepalive: true,

          // Livereload needs connect to insert a cJavascript snippet
          // in the pages it serves. This requires using a custom connect middleware
          middleware: function(connect, options) {

            return [

              // Load the middleware provided by the livereload plugin
              // that will take care of inserting the snippet

              // Serve the project folder

    // grunt-open will open your browser at the project's URL
    open: {
      all: {
        // Gets the port from the connect configuration
        path: 'http://localhost:<%= connect.all.options.port%>'

    // grunt-regarde monitors the files and triggers livereload
    // Surprisingly, livereload complains when you try to use grunt-contrib-watch instead of grunt-regarde 
    regarde: {
      all: {
        // This'll just watch the index.html file, you could add **/*.js or **/*.css
        // to watch Javascript and CSS files too.
        // This configures the task that will run when the file change
        tasks: ['livereload']

  // Creates the `server` task

    // Starts the livereload server to which the browser will connect to
    // get notified of when it needs to reload
    // Connect is no longer blocking other tasks, so it makes more sense to open the browser after the server starts
    // Starts monitoring the folders and keep Grunt alive

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: