grunt-reload

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

npm install grunt-reload
11 downloads in the last day
56 downloads in the last week
469 downloads in the last month

grunt-reload

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

Getting Started

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:

grunt.loadNpmTasks('grunt-reload');

Documentation

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.

Configuration:

  • 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

Example

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

// project configuration
grunt.initConfig({
    lint: {
        all:['js/*.js']
    },
    reload: {
        port: 6001,
        proxy: {
            host: 'localhost',
        }
    },
    watch:{
        files:['index.html', 'style.less'],
        tasks:'default reload'
    }

});

grunt.loadNpmTasks('grunt-less');
grunt.loadNpmTasks('grunt-reload');

grunt.registerTask('default', 'lint less');

Usage

grunt reloadServer watch

TODO

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

Release History

05/27/2012 - 0.1.0: Initial release.

License

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

npm loves you