Skip to content
[DEPRECATED] Refresh your CSS (or page) with each save via LiveReload
Latest commit 095f4f8 Feb 24, 2013 3 @ericclemmons Deprecate project
grunt-contrib-livereload now performs the same function.
Failed to load latest commit information.
bin Initial commit Jan 22, 2013
tasks Allow backwards compatibility with grunt 0.3 Feb 9, 2013
test Initial commit Jan 23, 2013
.gitignore Initial commit Jan 23, 2013
LICENSE Initial commit Jan 23, 2013 Deprecate project Feb 24, 2013
grunt.js Initial commit Jan 23, 2013
package.json Tag v0.1.3 Feb 9, 2013


Refresh your CSS (or page) with each save via LiveReload.

DEPRECATED IN FAVOR OF grunt-contrib-livereload

This plugin originated by there not being a LiveReload plugin that could be reloaded via watch repeatedly that also supported CSS-only reloading.

Now that the Yeoman community has resolved that, this plugin is no longer necessary, even though it still works great :)

Getting Started

First, install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-livereload

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



Third, have livereload monitor changes to browser-accessible resources. This part is crucial, as CSS, if specified correctly, can be reloaded without refreshing the entire page.

// grunt.js
  livereload  : {
    options   : {
      base    : 'public',
    files     : ['public/**/*']

In this example, public/css/app.css will trigger a reload of the css/app.css resource only, while public/index.html will cause a full page refresh.

Finally, ensure your watch task doesn't process CSS at the same time it processes HTML, JS, and other resources that are being monitored:

// grunt.js
  watch: {
    somecss: {
      files: '**/*.css',
      tasks: ['copy:somecss']
    js: {
      files: '**/*.js',
      tasks: ['concat']

Many people watch everything and run their build process each time. This is unecessarily slow and prevents LiveReload from being able to see when only the .css has changed. So, it's recommended that you watch different types of files and perform only what's necessary to rebuild those.

This way, CSS is copied/processed alone and LiveReload will seamlessly replace the styles in your page without refreshing the whole browser.



  • Grunt 0.4 support (Thanks @xbudex!)


  • If livereload attempts to start an already-running server, it logs to the console rather than throwing an err. (This is common when clearing require.cache)


  • Refresh browser when livereload task is ran while server is running


  • Initial release


Copyright (c) 2013 Eric Clemmons Licensed under the MIT license.

Something went wrong with that request. Please try again.