Как задать сортировку scss файлам при сборке через Gulp?

Question

[Андрей Кварцов]

Есть такой gulp task для компиляции scss и объединения в один файл:

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

Сборка идёт, проблем никаких нет. проблема лишь в том, в каком порядке идёт сборка.
Допустим у меня есть файл main.scss:

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

А второй файл banner.scss, и он содержить 500 строк кода. После компиляции я получаю сначала стили для баннера, а только потом для body. Но дело не только в боди, хотел бы чтобы всё собиралось в том порядке в котором укажу я, чтобы стили для блоков грузились один за другим, а не как попало.

Answer 1

[Ольга Ветер]

Чем не подходит вариант галпом обрабатывать только main.scss, а уже в него подключать в нужном порядке все необходимые файлы стилей?

Comments

[Андрей Кварцов]

Я начал использовать галп, чтобы избавиться от рутинных действия, поэтому хотелось бы, чтобы все стили из app/html/**/*.scss цеплялись сами по дефолту, но в нужном порядке

[Ольга Ветер]

Андрей Кварцов, логично же, что нужный порядок в автоматическом режиме может быть разве что алфавитным. Чтобы сборщик понимал, какой порядок нужный, нужно ему как-то об этом сообщить.