Refresh your CSS (or page) with each save via 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 :)
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:
grunt.loadNpmTasks('grunt-livereload');
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 anerr
. (This is common when clearingrequire.cache
)
- Refresh browser when
livereload
task is ran while server is running
- Initial release
Copyright (c) 2013 Eric Clemmons Licensed under the MIT license.