README.md

About

Example gruntfile and package.json to spin up a server on port 8080, compile jade/sass, watch for changes to livereload html/css/js on the server.

Get started

In project root do:

npm install
grunt

This will run a server on port 8080, automatically compile jade/sass to html/css and watch any changes to jade/sass/js to livereload the server.

Expected file structure

// This will be server document root.
// Your index.html should go here.
// css, js serverd from here
www
www/css
www/js


// Jade files live here, the compiled
// html will be placed in www
jade

// Sass files live here, the compiled
// css will be placed in www/css
sass

Gruntfile.js
package.json

Gruntfile.js

'use strict';

var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      livereload: {
        options: {
          port: 8080,
          middleware: function(connect, options) {
            return [lrSnippet, folderMount(connect, options.base)]
          },
          base: 'www'
        }
      }
    },
    jade: {
      html: {
        files: {
          'www/': ['jade/*.jade']
        },
        options: {
          client: false
        }
      }
    },
    sass: {
      dev: {
        options: {
      	  style: 'expanded'
      	},
      	files: {
      	  'www/css/main.css': 'sass/main.sass' 
      	}
      }
    },
    regarde: {
      html: {
        files: ['jade/*.jade'],
        tasks: ['jade', 'livereload'],
        events: true
      },
      css: {
      	files: ['sass/*.sass'],
      	tasks: ['sass', 'livereload'],
      	events: true
      },
      js: {
        files: ['www/js/*.js'],
        tasks: ['livereload'],
        events: true
      }
    }
  });

  // Load contrib tasks...
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-jade');
  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-livereload');
  grunt.loadNpmTasks('grunt-contrib-sass');

  // Register tasks aliases...
  grunt.registerTask('build', 'Compile all jade/sass into html/css ready to be served.', ['jade', 'sass']);
  grunt.registerTask('default', 'Starts a server, watches for changes to automatically build and live reload files.', ['livereload-start', 'connect', 'regarde']);

};

package.json

{
  "name": "project-x",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-connect": "~0.2.0",
    "grunt-jade": "~0.4.0",
    "grunt-regarde": "~0.1.1",
    "grunt-contrib-livereload": "~0.1.2",
    "grunt-contrib-sass": "~0.3.0"
  }
}