(good to get that off my chest!)
A grunt task that enables live reloading of updated watch files 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:
grunt.loadNpmTasks('grunt-reload');
Version 0.4.x of this plugin is compatible with Grunt 0.4.x. Version 0.2.0 is compatible with Grunt 0.3.x.
This plugin provides the grunt task 'reload'. The 'reload' task is designed to be called via the watch task configuration and before the watch command in a custom task, such as default, in order to start the server.
The reload task tells the page to refresh itself via websocket connection between the reload server 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:
Proxy
This will automatically append the script to a requested HTML file. Here's how you would use grunt-reload with grunt-less:
// project configuration
grunt.initConfig({
jshint: {
all:['js/*.js']
},
reload: {
port: 6001,
proxy: {
host: 'localhost'
}
},
less: {
style: {
'style.css': 'style.less'
}
},
watch:{
files:['index.html', 'style.less'],
tasks:['less', 'reload']
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-reload');
grunt.registerTask('default', ['jshint', 'less']);
The reload server would listen at http://localhost:6001 and forward to requests to http://localhost.
IFrame
Use this method if you don't want to muck around with your server's response.
...
iframe: {
target: 'http://localhost:9999'
}
...
Your iframe'd dev site in this instance would be available at the default http://localhost:8001
LiveReload extension
This is useful if you want to reload CSS files in place in addition to the entire page when files change. It requires a LiveReload extension. In-line reloading of CSS & images requires grunt 0.4 and the 1.x version of LiveReload.
Set the reload server to listen on LiveReload's default port:
...
port: 35729, // LR default
liveReload: {}
...
Make sure you enable LR in your browser (click the LR button in Chrome).
Manual include
If you prefer hard-coding over proxies, extensions, and iframes, you can just do this:
<script>__reloadServerUrl="ws://localhost:8001";</script>
<script type="text/javascript" src="https://github.com/webxl/grunt-reload/raw/master//localhost:8001/__reload/client.js"></script>
As with the extension, this makes the reload client work directly from your dev server.
grunt reload watch
If you want to run a static server using the bundled server task, and enable reloading, you can configure something like this:
...
reload: {
port: 6001,
proxy: {
host: 'localhost',
port: 8000 // should match server.port config
}
},
watch:{
files:['index.html', 'style.less'],
tasks:['less', 'reload']
}
...
grunt.registerTask('default', ['connect', 'reload', 'watch']);
In this case, you can just run the default task:
grunt
Copyright (c) 2012 webxl
Licensed under the MIT license.