How to sort scss files when building with Gulp?

Question

JavaScript

There is such a gulp task to compile scss and merge into one file:

gulp.task('scss', function () {
    clear.sync(path.clear.style);
    gulp.src(['app/html/**/*.scss', 'app/scss/**/*.scss'])
        .pipe(filter(function (file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))
     <b>   .pipe(scss({outputStyle: 'nested'})
     </b>       .on('error', notify.onError(
                {
                    message: "<%= error.message %>",
                    title: "Sass Error!"
                }))
        )
        .pipe(autoprefixer("last 3 version"))
        .pipe(prettify({
            indent_size: 3
        }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('build/css/'))
        .pipe(browserSync.reload({stream: true}))
});

Assembly is in progress, no problems. The only problem is the order in which the build is done.
Let's say I have a main.scss file :

body {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 18px;
  min-width: 1200px;
}
....

And the second file is banner.scss , and it contains 500 lines of code. After compilation, I get the styles for the banner first, and only then for the body. But it's not just about the body, I would like everything to be assembled in the order in which I specify, so that the styles for the blocks are loaded one by one, and not randomly.

Answer 1

Why is it not suitable to process only main.scss in a gallop, and already include all the necessary style files in the right order?