How to monitor imported files in gulp and recompile the main ones?

Question

css

I understand with gulp, you just need to follow and compile the stylus and jade files.
I googled it, I got this gulp file and this is the structure: Link to screenshot
Now it works fine only if changes are made to the main files.
But they also have imports. And I thought that when you change the file that is imported, there will be changes in the main file and it will be recompiled, but this is not the case as it turned out.
In general, how to make it so that when any file is changed, recompilation occurs.
For example, I changed the value of a variable in the vars.styl file and the changes were reflected on the page. So that gulp knows that I changed the import file and recompiled the main one, in which all the imports.
Perhaps you understand) Thank you in advance.

Answer 1

gulp.src([
            "path/to/stylus/**/*.styl",
            "!path/to/stylus/**/_*.styl"
        ])

Answer 2

Look at my template there, this is also implemented for jade https://github.com/zoxon/gulp-front

Answer 3

You need the watcher to keep track of all files of a certain type, and only the main ones to the input of the handlers.
This is how your watch-task will look like:

gulp.task("watch", function () {
  gulp.watch("application/jade/**/*.jade", ["jade"]);
  gulp.watch("application/stylus/**/*.styl", ["stylus"]);
}