Gulp Watch Example

In the first video we saw how easy it is to get started using Gulp. Now let's make our lives even easier with this Gulp Watch example.

We don't want to have to be swapping back and forth between our console and our IDE, jabbing at the up arrow then stabbing return each and every time we make a change. No. That would be poor.

Instead we want Gulp to do 99% of the work for us.

Gulp can watch our files for changes. We can tell Gulp to watch for changes to specific files, or every file with a specific extension - all .css files for example - or entire directories, or any combination you can think of.

When Gulp spots a change it will re-run the tasks we tell it to run.

This is where Gulp starts to get really powerful. We have all these cool time saving tasks happening for us with almost no effort. I say 99% / almost, and that's because we must start Gulp initially. After that, it does its thing with no further attention needed.

Gulp Watch Example

Did you know, Apple got their idea for the Watch from Gulp.

No, that's a lie.

Lies aside, gulp.watch is incredibly powerful and useful.

Let's build on the example from the previous video by adding a watch tasks:

// project_root/gulpfile.js

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');

gulp.task('minify-css', function() {
  return gulp.src('styles/*.css')
    .pipe(minifyCss())
    .pipe(gulp.dest('dist'));
});

gulp.task('watch:css', function () {
    gulp.watch('styles/*.css', ['minify-css']);
});

gulp.task('default', ['minify-css']);

Ok, nothing super crazy going on here, but let's step through it anyway.

The two var definitions are the same as last time, as is the minify-css task. None of that changes.

We have added:

gulp.task('watch:css', function () {
    gulp.watch('styles/*.css', ['minify-css']);
});

Notice, gulp.task and gulp.watch.

Firstly we need to define a new task. I've used the convention of watch: to begin with, as this is common place and you may define another watch task for your .js files or your .scss files or whatever.

Then, the gulp.watch job itself simply specifies a directory (or a single file) to 'watch', and then we provide an array of tasks to run when any file matching that first part is changed.

So, in this case, when any file in the styles directory with an extension of .css is found to have changed, the minify-css task will re-run.

We can add more tasks to the array and it will run them one after the other. The ordering can be important, depending on what you are doing, so be aware of that.

Gulp Watch Gotcha

The one thing to be careful of is that the above example doesn't handle sub directories.

If we created a new sub directory under our styles/ directory, maybe: styles/another_dir and then added some.css file to that sub directory, our watch task wouldn't 'watch' that file.

That's annoying, but also very easy to fix.

We must use the special double asterisk syntax. That's not Gulp specific, it's a JS thing, but here's the revised example:

gulp.task('watch:css', function () {
    gulp.watch('styles/**/*.css', ['minify-css']);
});

Notice, styles/**/*.css.

This indicates to look in any and all sub directories, including the top level directory.

It's nice, as it covers everything. But it sucks, in that it's not immediately obvious that you need it, and that it will catch the top level dir also.

Be sure to update the minify-css task with the double asterisk also!