Register to get access to free programming courses with interactive exercises

Watch Gulp

One important function built into the main Gulp package is the watch() function. As you can understand from its name, its main purpose is to watch, or rather, to track. But what are we tracking, and how? That's what we're going to talk about in this lesson.

The watch() function has its own lesson for a reason; its functionality and use is much wider than that of the commands you already know, such as src(). Watch is not just a function within a task; it is a task in itself, which starts its work immediately when the gulp command is executed and ends its work when the entire script is finished.

First, let's figure out how to set file tracking. This is done using the watch() function itself, which takes three basic parameters:

  1. Paths to files to be tracked
  2. Tracking options
  3. A function or task to be called when a file is changed

The second parameter is often 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


Note that here: you can use Globs as a path. It also doesn't have to be a file. You can specify an entire directory as a path and there'll be events there, which we'll talk about below


The function that was passed as the watch() argument is no different from what was used in the previous lessons. The main difference is that it has no name, these sorts of functions are also called anonymous. This isn't mandatory; for example, we can create a function and specify its name as a parameter. This won't change the behavior of watch. I.e., 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

Note that in the second example, when you change the file, Gulp writes the name of the function that was called because it's no longer anonymous. When you change a file, the changeAppStylesFile() function is called, 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. This is necessary to avoid calling the task unnecessarily. For example, we don't want to perform an action when adding a file to the directory, only when modifying one.

This is done using the second parameter of the watch() function, which defines the parameters of the function. The events parameter is responsible for the actions that the task will be called on. In it, you can specify either one specific events or several at once. Let's 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 scanning paths for tracking. Now the watcher will be ready to track changes. This stage can be called the end of initialization
  • error — tracking error

By default, the events parameter is set to all, so all events are tracked. 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

In most cases, the default event is used, i.e., all. This is because when compiling SASS, Pug and other preprocessors/template makers, not only is changing files critical, but so is adding/removing them.


Note that: unlike normal tasks, watch() will keep going until it's forced to stop. This is important to keep in mind during development. It is possible to forget to stop the process in the terminal and get compilations that we didn't expect



Hexlet Experts

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:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
Layout Designer icon
Profession
Under development beginner
Layout with the latest CSS standards
start anytime 5 months

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.