This is my personal preferred setup using Grunt while developing.

Gruntfile.js

module.exports = function (grunt) {

  // Require all grunt-tasks instead of manually initialize them. 
  require('load-grunt-tasks')(grunt);

  // The magic
  grunt.initConfig({
    watch: {
      scripts: {
        files: ['public/js/*.js'],
        tasks: ['jshint'],
        options: {
          spawn: false,
          livereload: true
        }
      },
      css: {
        files: ['public/sass/**/*.scss'],
        tasks: ['sass'],
        options: {
          spawn: false,
          livereload: true
        }
      },
      html: {
        files: ['public/views/**/*.html'],
        options: {
          spawn: false,
          livereload: true
        }
      }
    },
    sass: {
      dist: {
        files: {
          'public/css/main.css': 'public/sass/main.scss'
        }
      }
    },
    concurrent: {
      target: {
        tasks: ['jshint', 'watch', 'nodemon'],
        options: {
          logConcurrentOutput: true
        }
      }
    },
    jshint: {
      all: ['Gruntfile.js', 'public/js/*.js', 'test/**/*.js', 'lib/**/*.js']
    },
    nodemon: {
      dev: {
        options: {
          file: 'index.js'
        }
      }
    },
    browser_sync: {
      files: {
        src : 'public/css/*.css'
      },
      options: {
        watchTask: true
      }
    }
  });

  grunt.registerTask('server', ['concurrent']);

};

package.json

{
  "name": "gruntfiledemo",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "author": "Patrik Wibron",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.2",
    "load-grunt-tasks": "~0.2.0",
    "grunt-concurrent": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-nodemon": "~0.1.2",
    "grunt-browser-sync": "~0.3.0",
    "grunt-contrib-sass": "~0.5.1"
  }
}

How does browserSync ever get called?