How to compile multiple Sass files with Gulp for WordPress custom theme?

Question

im building custom wordpress theme project and i have problems with sass file watching in my gulp file.

Gulpfile: https://pastebin.pl/view/199614e2

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const connect = require('gulp-connect');

// Compile Sass to CSS
gulp.task('sass', function () {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload());
});

// Transpile and minify JavaScript
gulp.task('js', function () {
  return gulp.src('src/js/**/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(rename('main.min.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload());
});

// Start a local server with live reloading
gulp.task('server', function (done) {
  connect.server({
    root: './',
    livereload: true
  });
  done();
});

// Watch for changes
gulp.task('watch', function () {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
  gulp.watch('src/js/**/*.js', gulp.series('js'));
});

// Default task
gulp.task('default', gulp.parallel('server', 'sass', 'js', 'watch'));

Im saving multiples sass files in subfolder too,gulpfile start compiling and minifying into style.min.css.

Dist path:

C:\wamp64\www\oac\wp-content\themes\oac\dist\css\style.min.css

Src path:

C:\wamp64\www\oac\wp-content\themes\oac\src\scss\components_buttons.scss

C:\wamp64\www\oac\wp-content\themes\oac\src\custom.scss

But for now only js working