Seeing as how Craft’s `happylager.dev` demo site comes with a gruntfile, I took a couple minutes to add LiveReload to it. As LiveReload is now part of `grunt-contrib-watch`, it was as easy as adding this into the existing `gruntfile.js`:
```
options: {
livereload: true,
},
```
into the block that looks like:
```
grunt.initConfig({
watch: {
// ...
}
}
```
And then adding `` to the `{%block head %}` of `/templates/_layouts/base.html`:
--
It was finicky at first, but after running `grunt` in the command line and reloading the Chrome browser (which has (link: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei text: the LiveReload extension)) a bunch of times it caught up and worked.
--
## UPDATE
Thanks very much to (link: https://twitter.com/josh_stewart text: @josh_stewart) for showing me a similar — but *maybe better* — way to do this with (link: http://gulpjs.com/ text: Gulp) and (link: https://www.browsersync.io/ text: BrowserSync)
The two advantages of BrowserSync: the instructions are super-clear and the LiveReload extension support is full of comments about its lack of updates.
The major part of the gulpfile.js follows:
```
gulp.task('serve', ['styles'], function() {
browserSync.init({
proxy: 'http://SITENAME.dev',
notify: false,
logLevel: 'info',
logConnections: true,
logFileChanges: true,
online: true,
});
gulp.watch('source/sass/*.scss', ['styles']);
gulp.watch('craft/templates/**/*.html').on('change', browserSync.reload);
});
```
and that the last part of the `return` statement in `gulp.task('styles', function () { /* ... */ }` is `.pipe(browserSync.stream());`