Gulp: how to rebuild another when changing one file?

Question

css

There is an article.less file with the following content:
@import "config";
@import "header";
@import "body";
@import "footer";
When changing, for example, the header.less file, I need to compile only the articles.less file, but I compile all 4 files. In fact, I don't need separate css blocks. I'm only interested in the final file, which I will include on the page.
Also, when compiling the header.less file, the gulp throws an error that the variable was not found. This variable is set in the config.less file, so the article file compiles fine, but when the gulp separately starts compiling header, it doesn't find it. It turns out that I have to connect config in each file?
How to get around these problems?

Answer 1

Break it down into subtasks:

gulp.task('watch:article', function(){
  gulp.watch('web/src/style/less/article/**/*.less', ['less:article']); 
});
gulp.task('watch:less', ['watch:article', 'watch:other']);
gulp.task('watch', ['watch:less', 'watch:js']);