Refreshing the Browser Automatically
The grunt-contrib-watch plug-in has built-in support for LiveReload, an amazing tool that can automatically reload web pages and CSS documents in the browser whenever files change. This is incredibly useful for any web developer, so let’s configure it.
All we have to do is add a few additional options to the configuration section for the grunt-contrib-watch plug-in. First, we’ll configure it to watch for changes to the index.html file. We won’t need to run any tasks when that file changes. And then we’ll include the option to enable LiveReload support.
| workflow/markdown/Gruntfile.js | |
| | interface: { |
| | files: ['index.html'] |
| | }, |
| | options: { |
| | livereload: true |
| | } |
To see this in action, you’ll need to download the extension for your web browser. You can get extensions for Chrome, Firefox, and Safari from the LiveReload website.[12] Install the plug-in, then fire up grunt-watch in your Terminal and activate the plug-in. Then change something in the HTML or the CSS and see the page update after you save the file.
LiveReload is one of the most powerful tools a modern web developer has. Being able to see the changes live without having to refresh the page manually dramatically speeds up the development process, especially when you’re modifying a site’s design. Since Grunt makes this so easy to set up, you should make it part of your workflow immediately.