Watch & Reload

We can use gulp to watch a set of files and automatically run a task when any of them change.

For example we might watch our js directory and run the js task.

gulp.task('watch', function() {
            gulp.watch('./js/**/*.js', ['js']);
          });

We can then start our watchers using gulp watch.

Combination tasks

We can make a task depend on other tasks. This can help us split our tasks up into smaller pieces, like so:

gulp.task('build', [
            'js',
            'sass',
            'lib',
          ]);

Now we run:

gulp build

and this will run all the tasks.

Default task

We can set a default task that will be run when we call gulp:

gulp.task('default', [
            'build',
            'watch'
          ]);

Now we only need to run:

gulp

to build and turn on the watchers.

Livereload

Live reload will automatically reload your web page when a task completes. It comes in two parts:

The gulp-livereload plugin that manages the livereload server
A Chrome plugin that listens for a reload

If you install both of these you can chain live-reload into your tasks and have gulp reload your browser automatically on file change.

This works extremely well when multi-screening.

gulp.task('assets:js', function () {
            return gulp.src('./js/**/*.js')
              .pipe(concat('app.js'))
              .pipe(gulp.dest('./build'))
              .pipe(livereload());
          });

Exercise - Livereload

Create a gulp watch task which watches your js.
Create a default task so you can just call gulp to start watching.
integrate live-reload