使用gulp-sass，除了直接父目錄外，如何保留我的sass文件的文件夾結構？

Question

我有包含SASS文件的多個文件夾中的項目：

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

我也有使用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 

Answer 1

可以使用gulp-flatmap插件來解決這個問題：

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))) 
    )) 
); 

這將選擇所有app目錄，然後將每個這些目錄映射到一個新的數據流中的所有.scss文件在特定的目錄連接成一個bundle.css文件。