Register to get access to free programming courses with interactive exercises

Watch Gulp

The watch() function is an essential feature built into the main Gulp package. As you can guess from its name, its purpose is to track. But what do we watch and how? That's what we're going to talk about in this lesson.

The watch() function has its lesson for a reason. Its functionality and use are much broader than the commands you know, such as src(). The watch is not just a function within a task. It is a separate task, that starts when we execute the `gulp' command and stops when the entire script finishes.

First, let's figure out how to set file tracking. We can do it using the watch() function itself, which takes three parameters:

  1. Paths to files to track
  2. Tracking options
  3. A function or task to call when a file is changed

The second parameter may be omitted, meaning the watcher (functions that track actions are often named like this) looks something like this:

const { watch } = require('gulp');

const watchers = () => {
  watch('src/sass/app.scss', (done) => {
    console.log('Oops, the app.scss file has changed');

    done();
  });
};

exports.watchers = watchers;

Calling watch with an anonymous function

You can use Globs It doesn't have to be a file. You can specify an entire directory as a path, and there will be events there, which we'll discuss below.

The function passed as the watch() argument does not differ from the one used in the previous lessons. The main difference is that it has no name. They are also called anonymous. It is not mandatory. For example, we can create a function and pass its name as a parameter. It won't change the behavior of the clock. The example above is equivalent to the following example:

const { watch } = require('gulp');

const changeAppStylesFile = (done) => {
  console.log('Oops, the app.scss file has changed');

  done();
};

const watchers = () => {
  watch('src/sass/app.scss', changeAppStylesFile);
};

exports.watchers = watchers;

Calling watch with an anonymous function

In the second example, when you change the file, Gulp writes the name of the function because it's no longer anonymous. When we change a file, we call the changeAppStylesFile() function, which you can see in the output of Gulp itself.

Events

What events does watch() respond to? By default, it's events that are in any way related to file or directory changes. We can also specify which events we need. It is necessary to avoid calling the task unnecessarily. For example, we don't want to act when adding a file to the directory, only when modifying one.

We do this using the second parameter of the watch() function, which defines the function's parameters. The events parameter is responsible for the actions on which the task should we call. You can either specify one specific `event' or several at once. Let's have a look at what events are available when using Gulp:

  • add — add a new file
  • change — change a file
  • unlink — delete a file
  • addDir — add a directory
  • unlinkDir — delete a directory
  • ready — finish a scan for tracking paths. Now the watcher will be ready to track changes. This stage can be called the end of initialization
  • error — tracking error

By default, we set the events parameter to all so we can track all events. The ready and error events are an exception because they're more related to the internal logic of the function itself:

const { watch } = require('gulp');

const changeAppStylesFile = (done) => {
  console.log('Oops, the app.scss file has changed');

  done();
};

const checkFileStructure = (done) => {
  console.log('The file structure has changed');

  done();
};

const watchers = () => {
  // Tracking only the `change` event
  watch('src/sass/app.scss', { events: 'change' }, changeAppStylesFile);

  // Tracking the deleting and adding of files in the directory
  watch('src/sass/', { events: ['add', 'unlink'] }, checkFileStructure);
};

exports.watchers = watchers;

Tracking changes in Gulp

It is because when we compile SASS, Pug, and other preprocessors or template makers, it is crucial not only to change files but also to add and remove them.

Unlike regular tasks, watch() will continue until you force it to stop. It is essential to keep this in mind during development. It is possible to forget to stop the process in the terminal and get compilations we didn't expect.


Do it yourself

Create multiple watchers for files and directories. Try combinations of events, running the Gulp process each time. Once started, interact with the files and directories to see which ones are called by which function.


Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

Bookmate
Health Samurai
Dualboot
ABBYY
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.