使用gulp sass，如何保留除直接父目录之外的sass文件的文件夹结构？

我有一个包含多个包含sass文件的文件夹的项目：

|── src
    └── scripts
        └── app1
            └── sass
                └── base.scss
        └── app2
            └── sass
                └── base.scss

我还有一个gulp任务，它使用

gulp sass

和

gulp concat css

编译那些

.scss

文件：

gulp.task('build:sass', () =>
    gulp.src([
      'scripts/**/*.scss'
    ])
    .pipe(plugins.sass().on('error', plugins.sass.logError))
    .pipe(plugins.concatCss('bundle.css'))
    .pipe(gulp.dest('dist'))
  );

现在，上面的任务只是将

bundle.css

创建到

dist

文件夹中：

|── dist
    └── bundle.css

我希望发生的是，除了

sass

文件夹现在是

css

之外，初始文件夹结构被保留

|── dist
    └── scripts
        └── app1
            └── css
                └── bundle.css
        └── app2
            └── css
                └── bundle.css

您可以使用插件解决此问题：

var path = require('path');

gulp.task('build:sass', () =>
  gulp.src('scripts/app*/')
    .pipe(plugins.flatmap((stream, dir) =>
       gulp.src(dir.path + '/**/*.scss')
         .pipe(plugins.sass().on('error', sass.logError))
         .pipe(plugins.concatCss('css/bundle.css'))
         .pipe(gulp.dest('dist/' + path.basename(dir.path)))
    )) 
);

这将选择所有

应用程序

目录，然后将每个目录映射到一个新流，其中该特定目录中的所有

.scss

文件都连接到一个

bundle.css

文件中