How to organize the assembly for different pages with their own styles?

Question

gulp.js

Suppose I have two pages on which I need to organize the connection of different style files.
At the input, for example, the files style.scss and style-main.scss (each one connects to its own page) and the output is their respective minified versions. While the assembly takes place in one file, and the output is one minified file.
Here is the current task code

gulp.task("css:build", function () {
    return gulp.src(path.src.css)
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ["last 5 versions"],
            cascade: true
        }))
        .pipe(removeComments())
        .pipe(cssbeautify())
        .pipe(gulp.dest(path.build.css))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest(path.build.css))
        .pipe(webserver.reload({stream: true}));
});

Answer 1

If I understand the question correctly, then you can pass an array of files to gulp.src. In your case, something like this:

gulp.task('css:build', function () {
  gulp.src(['./src/scss/style.scss', './src/scss/style-main.scss'])
/* или так return gulp.src('./src/sсss/*.sсss') // "*" - означает, что будут браться и обрабатываться все файлы с расширением scss из этой дирректории */
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 5 versions'],
      cascade: true
    }))
    .pipe(removeComments())
    .pipe(cssbeautify())
    .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(path.build.css))
    .pipe(webserver.reload({stream: true}));
});