gulp: working with gulp.src and gulp.dest

File structure for the project:

-root // корень проекта --app //папка для продакшена, в нее будут складываться компилированные файлы --dev // папка для разработки, в ней будет вестись разработка 

dev folder structure for scss:

 -dev --scss --base // здесь подключаемые файлы, миксины, переменные.... --components // папка со стилями для компонентов проекта --component1 style.scss --component2 ..... main.css 

gulpfile:

 gulp.task('sass', function(){ return gulp.src('dev/scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass({outputStyle: 'expanded'})) .pipe(sourcemaps.write()) .pipe(autoprefixer({ browsers: ['last 4 versions'] })) .pipe(gulp.dest('app')) }); 

at the exit:

 -app --components --component1 style.css --component2 style.css main.css 

So here's how to do something so that the output would be the following:

 -app --component1 style.css --component2 style.css main.css 

I tried to set a colbek in gulp.dest and change file.relative in it:

 .pipe(gulp.dest(function(file) { var path = file.relative.split('\\'); (path[0] == 'project components') ? path.shift() : path; file.relative = path.join('\\'); return 'app'; })) 

As a result, I received an error about the inability to modify file.relative

Error: File.relative is generated from the base and path attributes. Do not modify it.

True, I did not try to modify the path itself ...
But with this sample:

 gulp.src(['dev/scss/main.scss','dev/scss/project components/**/*.scss']) 

Folds as I need. If only here still the compiled files in a css pack ...
Tell me what are the options and ways to lay out the compiled files as I wanted, and those folders that I specify?