我有以下文件夹结构：

theme
  assets
    build
      css
        style.css
    src
      theme 
        buttons.scss
      style.scss
  components
    hero
      hero.html
      hero.scss
  index.html

我正在尝试将所有内容都编译到style.css中。这包括：

• 在srctheme文件夹中的任何.scss文件中发生的任何更改
• style.scss中的任何更改都应重新编译css
• 对组件scss文件（即hero.scss）的任何更改都应重新编译css。

要实现上述功能，我有以下gulpfile：

const base          = '/',
      assetsSRC     = 'theme/assets/src/',
      assetsDST     = 'theme/assets/build/',
      components    = 'theme/components/';

const gulp          = require('gulp'),
      sass          = require('gulp-sass'),
      sourcemaps    = require('gulp-sourcemaps'),
      fs            = require('fs'),
      path          = require('path'),
      merge         = require('merge-stream'),
      postcss       = require('gulp-postcss'),
      autoprefixer  = require('gulp-autoprefixer'),
      plumber       = require('gulp-plumber'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      strip         = require('gulp-strip-comments'),
      fileinclude   = require('gulp-file-include');

const componentCSS    = components + '**/component.scss',
      componentJS     = components + '**/component.js',
      globalCSS       = assetsSRC + 'scss/style.scss';
      configCSS       = assetsSRC + 'scss/config/**.scss';
      themeCSS        = assetsSRC + 'scss/theme/**.scss';
      globalJS        = assetsSRC + 'js/*.js';
      libJS           = assetsSRC + 'js/lib/*.js';


gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'compressed'
};

function getFolders(dir) {
  return fs.readdirSync(dir).filter(function(file) {
    return fs.statSync(path.join(dir, file)).isDirectory();
  });
}

function css() {
  var folders = getFolders(components);
  var tasks = folders.map(function(folder) {
    var src = path.join(components, folder);
    var dst = path.join(components, folder);
    return gulp.src(path.join(src, '/**/src/component.scss'))
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 2 versions'))
      .pipe(rename(function(file) {
        file.dirname = path.dirname(file.dirname);
        file.basename = file.basename;
        return file;
      }))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(src));
  });
  return merge(tasks);
}

function mainCSS() {
  var dst = path.join(assetsDST + 'css/');
  return gulp.src(globalCSS, { allowEmpty: true })
  .pipe(sourcemaps.init())
  .pipe(sass(sassOptions).on('error', sass.logError))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(dst));
}

function javascript() {
  var folders = getFolders(components);
  var tasks = folders.map(function(folder) {
    var src = path.join(components, folder);
    var dst = path.join(components, folder);
    return gulp.src(path.join(src, '/**/src/component.js'))
    .pipe(plumber())
    .pipe(uglify())
    .pipe(rename(function(file) {
      file.dirname = path.dirname(file.dirname);
      file.basename = file.basename;
      return file;
    }))
    .pipe(gulp.dest(src));
  });
  return merge(tasks);
}

function mainJS() {
  var dst = path.join(assetsDST + 'js/dist');
  return gulp.src([
    globalJS
  ])
  .pipe(plumber())
  .pipe(concat('scripts-min.js'))
  .pipe(strip())
  .pipe(uglify())
  .pipe(gulp.dest(dst));
}

function libraryJS() {
  var dst = path.join(assetsDST + 'JS/lib');
  return gulp.src(libJS).pipe(gulp.dest(dst));
}

function watch() {
  gulp.watch([globalCSS,configCSS,themeCSS],mainCSS);
  gulp.watch([globalJS],mainJS);
  gulp.watch([componentCSS], css);
  gulp.watch([componentJS], javascript);
}

exports.mainCSS = mainCSS;
exports.mainJS = mainJS;
exports.libraryJS = libraryJS;
exports.css = css;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.series(watch);
gulp.task('default', build);

但是，当我运行gulp css时，我得到错误：
Error: ENOENT: no such file or directory, scandir '/components/'个
我试过运行npm rebuild node-sass，但没有运气。

编辑

我已经取得了一些进展。但是，在我下面的gulp设置中，在我的css文件夹中创建了多个css文件。例如：

build
  css
    style.css
    hero.css

而我需要所有的东西来编译成style.css。

const assetsSRC     = 'assets/src/',
      assetsDST     = 'assets/build/',
      components    = 'components/';

const gulp          = require('gulp'),
      sass          = require('gulp-sass')(require('sass')),
      sourcemaps    = require('gulp-sourcemaps'),
      fs            = require('fs'),
      path          = require('path'),
      merge         = require('merge-stream'),
      postcss       = require('gulp-postcss'),
      autoprefixer  = require('gulp-autoprefixer'),
      plumber       = require('gulp-plumber'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      strip         = require('gulp-strip-comments');

const componentCSS    = components + '**/*.scss',
      componentJS     = components + '**/*.js',
      globalCSS       = assetsSRC + 'scss/style.scss';
      configCSS       = assetsSRC + 'scss/config/**.scss';
      themeCSS        = assetsSRC + 'scss/theme/**.scss';
      globalJS        = assetsSRC + 'js/*.js';
      libJS           = assetsSRC + 'js/lib/*.js';

var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'compressed'
};

function getFolders(dir) {
  return fs.readdirSync(dir).filter(function(file) {
    return fs.statSync(path.join(dir, file)).isDirectory();
  });
}

function css() {
  var folders = getFolders(components);
  var tasks = folders.map(function(folder) {
    var src = path.join(components, folder);
    var dst = path.join(assetsDST + 'css');
    return gulp.src(path.join(src, '/**/*.scss'))
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 2 versions'))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(dst));
  });
  return merge(tasks);
}

function mainCSS() {
  var dst = path.join(assetsDST + 'css/');
  return gulp.src(globalCSS, { allowEmpty: true })
  .pipe(sourcemaps.init())
  .pipe(sass(sassOptions).on('error', sass.logError))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(dst));
}

function libraryJS() {
  var dst = path.join(assetsDST + 'JS/lib');
  return gulp.src(libJS).pipe(gulp.dest(dst));
}

function watch() {
  gulp.watch([globalCSS,configCSS,themeCSS, componentCSS],mainCSS);
}

exports.mainCSS = mainCSS;
exports.mainJS = mainJS;
exports.libraryJS = libraryJS;
exports.css = css;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.series(watch);
gulp.task('default', build);

编辑2

在下面的代码中，components文件夹下所有名为component.scss的内容都合并到component.css中。
看起来我已经到了最后一个障碍，当我运行gulp css时，不是创建一个名为component.css的新文件，而是需要将所有内容合并并附加到style.css。

function css() {
  var folders = getFolders(components);
  var tasks = folders.map(function(folder) {
    var src = path.join(components, folder);
    var dst = path.join(assetsDST + 'css/');
    return gulp.src(path.join(src, '**/component.scss'))
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 2 versions'))
      .pipe(rename(function(file) {
        file.dirname = path.dirname(file.dirname);
        file.basename = file.basename;
        return file;
      }))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(dst));
  });
  return merge(tasks);
}

编辑3

深入研究一下，并非所有的component.scss文件都合并到component.css中（例如，如果有3个component.scss文件，component.css只有其中一个的样式）。