LiveReload is a wonderful tool/strategy for being able to develop websites more quickly. You can make a change and see it immediately shown in the browser without requiring you to manually refresh. To do this in NodeJs with Express, you’ll need just a few packages.
npm install connect-livereload --save-dev
app.configure 'development', -> app.use require('connect-livereload') 35729
Note that we only want to import and use the middleware when in development. This matches the fact that we are only declaring this package as in
Now you need to something to start a livereload server, watch files for changes, and broadcast their availability. The rest of this will be done via Grunt.
npm install grunt-cli -g npm install grunt grunt-regarde grunt-contrib-livereload --save-dev
grunt-cliwill allow you to run the
gruntcommand in the terminal. Global puts the bin in your path.
grunt-regardeis a file watcher. It senses changes to the filesystem.
grunt-contrib-reloadwill handle the pushing of new code to the browser.
Next setup the
module.exports = (grunt) -> grunt.initConfig regarde: style: files: ['app/static/css/*.css'] tasks: ['livereload'] grunt.loadNpmTasks 'grunt-contrib-livereload' grunt.registerTask 'be-lively', [ 'livereload-start', 'regarde' ]
Now when you run:
A livereload server is going to be setup. Then we watch for filesystem changes. The only things we’re watching are css files in our app. You could expand the
files array to watch more if you wish.
LiveReload all the Things
There are many ways to make this happen. There are numerous Node libraries, Grunt plugins, and browser plugins. Do what works for you. Just make it happen fast and tend it well from the beginning to the end of your project. Almost every solution I’ve found is somewhat high maintenance. This one has proven to be the same. What have you found to be your favorite LiveReload solution, and in what environment?