How to compile custom css file for each page in Gulp?

Question

gulp.js

Good day to all!
Can you please tell me how to configure gulp correctly?

It is necessary that, for example, for:
- the main page has a file - style.min.css
- the store page - style-shop.min.css

For the main page, import pulls too many style files that are not needed in the store ...

gulpfile.js looks like this

View code

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

I can’t figure out how it will be right, not to write another function the same only for another file .. and if there are 20 such files ..

Answer 1

Pass not a specific file to SRC, but a glob template pointing to several files at once.

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

At the same time, each file will be collected separately and it does not matter how it is originally called there.