Как компилировать свой css файл для каждой страницы в Gulp?

Question

[Evgeniy]

Добрый день, всем!
Подскажите пожалуйста как правильно настроить gulp?

Нужно чтобы например для:
- главной страницы был файл - style.min.css
- страницы магазина - style-shop.min.css

Для главной страницы импортом подтягивается слишком много файлов стилей, которые в магазине не нужны...

gulpfile.js выглядит так

Посмотреть код

let path = {
    build: {
        css: project_folder + "/css/",
    },
    src: {
        css: source_folder + "/scss/style.scss",
    },
    watch: {
        css: source_folder + "/scss/**/*.scss",
    },
    clean: "./" + project_folder + "/"
}

function css() {
    return src(path.src.css) 
    .pipe (
        scss({
            outputStyle: "expanded"
        })
    )
    .pipe (
        group_media()
    )
    .pipe(
        autoprefixer({
            overrideBrowserslist: ["last 5 version"],
            cascade: true
        })
    )
    .pipe(webpcss())
    .pipe(dest(path.build.css))
    .pipe(clean_css())
    .pipe(
        rename({
            extname: ".min.css"
        })
    )
    .pipe(dest(path.build.css))
    .pipe(browsersync.stream())
}

Не могу сообразить как правильно будет, не писать же ещё одну функцию такую же только для другого файла.. а если таких файлов 20 будет..

Answer 1

[Роман]

Передавайте в SRC не конкретный файл, а glob-шаблон, указывающий на несколько файлов сразу.

let path = {
    ..
    src: {
        css: source_folder + "/scss/*.scss",
    },
    ..
}

При этом, каждый файл, будет собирать отдельно и как он там изначально называется значения не имеет.

Comments

[Evgeniy]

да, спасибо.. так лучше

У меня было типа

return gulp.src([
        './src/scss/style.scss',
        './src/scss/style-shop.scss'
    ])