How to automatically recompile the main styles file in GULP when changing any style files?

Question

gulp.js

There is a task in gulp responsible for working with style files, I give it below:

// config.json

{
***
  "scss": {
    "dev": {
      "src": ["./src/app/css_source/**/*.scss", "!./src/app/css_source/res/", "!./src/app/css_source/res/**/*"],
      "dest": "./src/app/css/"
    }
  }
***
}

// css.js
"use strict";

const config        = require("../config.json");

const gulp          = require("gulp");
const watch         = require("gulp-watch");
const browserSync   = require("browser-sync");
const sass          = require("gulp-sass");
const autoprefixer  = require("gulp-autoprefixer");
const sourcemaps    = require("gulp-sourcemaps");

const conf  = {};
conf.src    = config.scss.dev.src;
conf.dest   = config.scss.dev.dest;
conf.autopref_config = config.autoprefixer;

const cssTask = () => {
  return gulp.src(conf.src)
    .pipe(watch(conf.src))
    .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(autoprefixer(conf.autopref_config))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(conf.dest))
    .pipe(browserSync.stream());
};

gulp.task("css", cssTask);
module.exports = cssTask;

At the moment, all style files are imported into one main file, which, in fact, is connected to the project. The problem is that styles can only be applied after the main file has been recompiled. And now it is recompiled only if it changes itself. How to make it so that when any style file changes, the main file is recompiled?
PS I hope I managed to explain my problem clearly :c

Answer 1

Found the answer to my question. For those who are interested, here is my solution. The option is naevrnoe such itself and needs to be improved, but better than it was.

// css.js

const cssTask = () => {
  return gulp.watch(conf.src).on("change", () => {
    return gulp.src("./src/app/css_source/main.scss")
      .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer(conf.autopref_config))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(conf.dest))
      .pipe(browserSync.stream());
  });
};

PS Reading gulp-watch and chokidar helped :3

Answer 2

in general, with such a config, it should already recompile when it changes, because src points to all .scss, not only to main.
I sometimes have the same thing with yeo-yeogurt. It compiles when any file changes, but if you add a new import to main.scss , it stops compiling files that fall under the /**/*.scss regular expression and starts recompiling only when main is resaved. Only restarting the task helps in this case.