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() {'./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', [

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', [

Now we only need to run:


to build and turn on the watchers.


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')

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
comments powered by Disqus