Gulp generates dynamic filenames

Question

I'm trying to resolve my issue a week. I want to achieve, that gulp generates scss files to css with scss`s parent folder names. The structure is :

assets
|____css
|    |    example1.css
|    |    example2.css
|    |    example3.css
|    |____components
|         |    test.css
|____sass
|    |____folder
|    |____components
|    |    |    test.scss
|    |____layout
|    |    |____example1
|    |    |    |    style.scss 
|    |    |____example2
|    |    |    |    style.scss 
|    |    |____example3
|    |    |    |    style.scss 

I tried this glob action in Gulp but sync is deprecated and not working right. But I found gulp-folders, which kinda resolve my issue. Here is my working gulpfile.js:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var concat      = require('gulp-concat');
var path        = require('path');
var folders     = require('gulp-folders');
var pathToFolder = 'assets/sass/layout';

gulp.task('minify-features', folders(pathToFolder, function(folder){
    return gulp.src(path.join(pathToFolder, folder, '*.scss'))
        .pipe(sass())
        .pipe(concat(folder + '.css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(browserSync.stream());
}));

// Static Server + watching scss files
gulp.task('serve', ['minify-features'], function() {
    browserSync.init({
        proxy: "mysite.dev"
    });
    gulp.watch("assets/sass/**/*.scss", ['minify-features']).on('change', browserSync.reload);
});
gulp.task('default', ['serve']);

This gulp file is wokring good if pathToFolder is set one of folders (in this case layout). But isn`t generate components folder.

Question: Has anybody have an idea, how I could resolve this with gulp-folders? Or some different solution?

Answer 1

Finally I finished my idea. I was pretty close to my result, I took OverZealous answer where is using glob. But I did changes in foreach cycle, where is gulp task function with name, I inserted simple javascript if condition, where I check which name I get from folder names array.

if ( name === "components") {
   return gulp.src(projectPath + "/sass/components/*.scss")
      .pipe(sass())
      .pipe(gulp.dest(projectPath + "/css/components"))
} else {
   return gulp.src(projectPath + "/sass/layout/" + name + "/*.scss")
      .pipe(sass())
      .pipe(rename(name + ".css"))
      .pipe(gulp.dest(projectPath + "/css"))
}

It`s little bit messy solution, but works fine.