Can't get livereload to work in gruntfile.js

Question

This is my first time build a Gruntfile.js and everything is working but live reload, I keep getting a task...Error when I add livereload: true, to the watch options, am I missing something out or have I done something wrong?

I looked here https://github.com/gruntjs/grunt-contrib-watch#optionslivereload and followed guide which states just adding livereload to the options and setting it to true.

module.exports = function(grunt) {
// configure the tasks
grunt.initConfig({

//Build task
copy: {
  build: {
    cwd: 'source',
    src: [ '**', '!**/*.less', '!**/*.coffee', '!**/*.jade' ],
    dest: 'build',
    expand: true
  },
},

// Clean task
clean: {
  build: {
    src: [ 'build' ]
  },
  stylesheets: {
      src: [ 'build/**/*.css', '!build/application.css' ]
  },
  scripts: {
    src: [ 'build/**/*.js', '!build/application.js' ]
  },
},

// Less task
less: {
  build: {
    options: {
      linenos: true,
      compress: false
    },
    files: [{
      expand: true,
      cwd: 'source',
      src: [ '**/*.less' ],
      dest: 'build',
      ext: '.css'
    }]
  }
},

// Autoprefixer task
autoprefixer: {
  build: {
    expand: true,
    cwd: 'build',
    src: [ '**/*.css' ],
    dest: 'build'
  }
},

// CSS Minify task
cssmin: {
  build: {
    files: {
      'build/application.css': [ 'build/**/*.css' ]
    }
  }
},

// Coffee task
coffee: {
  build: {
    expand: true,
    cwd: 'source',
    src: [ '**/*.coffee' ],
    dest: 'build',
    ext: '.js'
  }
},


// Uglify
uglify: {
  build: {
    options: {
      mangle: false
    },
    files: {
      'build/application.js': [ 'build/**/*.js' ]
    }
  }
},

// Html task
jade: {
  compile: {
    options: {
      data: {}
    },
    files: [{
      expand: true,
      cwd: 'source',
      src: [ '**/*.jade' ],
      dest: 'build',
      ext: '.html'
    }]
  }
},


// Watch task
watch: {
  stylesheets: {
    files: 'source/**/*.less',
    tasks: [ 'stylesheets' ]
  },
  scripts: {
    files: 'source/**/*.coffee',
    tasks: [ 'scripts' ]
  },
  jade: {
    files: 'source/**/*.jade',
    tasks: [ 'jade' ]
  },
  copy: {
    files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
    tasks: [ 'copy' ]
  }
},

// Connect to server task
connect: {
  server: {
    options: {
      port: 4000,
      base: 'build',
      hostname: '*'
      livereload: true,
    }
  }
}

});


// load the tasks
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

// builds and cleans the task
grunt.registerTask(
  'build',
  'Compiles all of the assets and copies the files to the build directory.',
  [ 'clean:build', 'copy', 'stylesheets', 'scripts', 'jade' ]
);

// Adds stylesheet to the task
grunt.registerTask(
  'stylesheets',
  'Compiles the stylesheets.',
  [ 'less', 'autoprefixer', 'cssmin', 'clean:stylesheets' ]
);
  // Adds javascript to the task
  grunt.registerTask(
    'scripts',
    'Compiles the JavaScript files.',
    [ 'coffee', 'uglify', 'clean:scripts' ]
  );

  //watches and connects to the server
  grunt.registerTask(
    'default',
    'Watches the project for changes, automatically builds them and runs a server.',
    [ 'build', 'connect', 'watch']
  );
};

Answer 1

You need to add the option to the config for the watch task. Currently you have the setting in the connect task rather than the watch one. Try something like this:

watch: {
  options: {
    livereload:true,
  },
  stylesheets: {
    files: 'source/**/*.less',
    tasks: [ 'stylesheets' ]
  },
  scripts: {
    files: 'source/**/*.coffee',
    tasks: [ 'scripts' ]
  },
  jade: {
    files: 'source/**/*.jade',
    tasks: [ 'jade' ]
  },
  copy: {
    files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
    tasks: [ 'copy' ]
  }
},

You will also need to remove it from the connect task