Использование gulp-sass, как сохранить структуру папок моих sass-файлов, за исключением ближайшего родительского каталога?

Question

У меня есть проект с несколькими папками, которые содержат SASS файлов:

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

У меня также есть задача глотка, который собирает эти .scss файлов с помощью gulp-sass и gulp-concat-css:

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.