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!

package.json:

{
	"name":"mysite",
	"version":"1.0.0",
	"dependencies":{},
	"devDependencies":{
		"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"

	}
}

Gruntfile.js

module.exports = function(grunt) {

  // Load Grunt tasks declared in the package.json file
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  // Configure Grunt 
  grunt.initConfig({

    // grunt-contrib-connect will serve the files of the project
    // on specified port and hostname
    connect: {
      all: {
        options:{
          port: 9000,
          hostname: "0.0.0.0",
          // 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
              require('grunt-contrib-livereload/lib/utils').livereloadSnippet,

              // Serve the project folder
              connect.static(options.base)
            ];
          }
        }
      }
    },

    // 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.
        files:['index.html'],
        // This configures the task that will run when the file change
        tasks: ['livereload']
      }
    }
  });

  // Creates the `server` task
  grunt.registerTask('server',[

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s

%d bloggers like this: