node package manager


A grunt task that enables live reloading of updated watch files in the browser.


A task and reverse proxy that enables live reloading in the browser.

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-reload

Then add this line to your project's grunt.js gruntfile:


This plugin provides two grunt tasks: 'reload' and 'reloadServer'. 'reload' is designed to be called via the watch task configuration. 'reloadServer' is designed to be called on the command-line along with the watch task.

The reload task tells the page to refresh itself via websocket connection between the reloadServer task and the reloadClient.js that is appended to the requested html file. When the watch task detects a changed file, it will process its configured tasks, which should include the 'reload' task if it is setup like the example below.


  • port: (optional, default: 8000) Reverse proxy listens on this port. This is necessary for including reload client javascript.
  • proxy: (required) This tells the proxy where to grab your development server's content
    • host: (required) development server hostname
    • port: (optional, default: 80) development server port
    • includeReloadScript: (optional, default: true) includes the client js to listen for reload commands

Here's how you would use grunt-reload with grunt-less:

// project configuration 
    lint: {
    reload: {
        port: 6001,
        proxy: {
            host: 'localhost',
        files:['index.html', 'style.less'],
        tasks:'default reload'
grunt.registerTask('default', 'lint less');

grunt reloadServer watch

  • reload resources without refreshing entire page
  • add option to run standalone web server for project
  • use bookmarklet or chrome extension to reload resources

05/27/2012 - 0.1.0: Initial release.

Copyright (c) 2012 webxl
Licensed under the MIT license.