Livereload in Foundation for Apps and Gulp

This guide shows how to implement LiveReload when developing using Foundation for Apps.

One of the most useful tools I’ve found when developing a website is the LiveReload utility. Whenever you make changes to the code of your site, be it HTML, CSS / SASS or Javascripts, the webpage that you are working on automatically refreshes to include your changes. This guide would also be valid for any site being built using Gulp.

[GARD]

Install LiveReload

This is a two-step process:

  • Run npm install gulp-livereload --save-dev in your Foundation for Apps project directory.
  • Install the LiveReload browser extension appropriate to your browser. Full instructions at their site.

Modify Your gulpfile.js

At the bottom of the file, find the task that starts like this:

// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['build', 'server:start'], function() {
  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);
  ...

and modify it so that it starts like this instead:

// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['build', 'server:start'], function() {
  $.livereload.listen();

  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);

  ....

[GARD]

At the end of each task that you wish to trigger a live reload, add .pipe($.livereload())

For instance the sass task would look like this:

gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe($.rubySass({
      loadPath: sassPaths,
      style: 'nested',
      bundleExec: true
    })).on('error', function(e) {
      console.log(e);
    })
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'))
    .pipe($.livereload());;
});

You’ll probably want to modify the uglify and copy-templates tasks as well. [GARD]

To Finish

Make sure to restart foundation-apps watch and enable the livereload extension in your browser. Hope that’s helpful!


COMMENTS