Day 4 of 100: Live Reload
Ever get tired of constantly pressing the refresh button or F5 to update your web page on the browser when you tweak your code? Know that feeling of dread at having those precious seconds add up.
Do you ever wish the browser would just update when you change a file? It can with Live Reload. No refresh required.
I just figured out how to set live reload up with grunt. All you need to use is grunt-contrib-watch and another plugin like grunt-express to start a web server.
watch: { /* Setting live reload on the same level as uglify, css, etc. * leads to live reload applying to each of them. You can set * options live reload inside uglify or the others to have it * only apply to those specific files and tasks. */ options: { livereload: true }, css: { files: ['assets/css/*.css'] }, uglify: { files: ['assets/js/*.js'], tasks: ['uglify'] }, html: { files: ['index.html'] } }
express: { all: { options: { /* Default and recommended port */ port: 35729, hostname: 'localhost', /*root directories from which static files will be served*/ bases: ['.'], livereload: true } } }
Bonus: Used grunt-open to open the browser after starting the server.
open: { all: { /* Use hostname and port specified in express */ path: 'http://localhost:35729' } }
There are other ways to get live reload functionality that don't involve Grunt. Learn more about Live Reload at http://livereload.com/.
Side Note: Now I’m going to sleep.
grunt-contrib-watch reload
grunt-contrib-watch reload examples
Introduction to GruntJS Part 3: LiveReload (video)
Renewing the Grunt and Livereload Magic (article)
