How to convert two scss files into two separate css files?

Question

gulp.js

Here is my gulp code, currently rendering the main.scss file in main.css.

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync').create(),
    sassPath = ('./src/style/scss/main.scss'),
    cssPath = ('./public/style/css'),
    jsPath = ('./public/js/main.js'),
gulp.task('styles', function () {
    gulp.src(sassPath)
        .pipe(sass())
        .pipe(gulp.dest(cssPath))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './public'
        }
    });

    gulp.watch('./src/style/scss/*.scss', ['styles']);
    gulp.watch('./public/**/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['styles','serve']);

and I only include main.css in the project.
Now I want to include media.css.
But I can't convert media.scss there.
I did the following:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync').create(),
    sassPath = ('./src/style/scss/main.scss'),
    cssPath = ('./public/style/css'),
    jsPath = ('./public/js/main.js'),
    mediaSassPath = ('./src/style/scss/_media.scss'),
    mediaCssPath = ('./public/style/css/media.css');
gulp.task('styles', function () {
    gulp.src(sassPath)
        .pipe(sass())
        .pipe(gulp.dest(cssPath))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('styles2', function () {
    gulp.src(mediaSassPath)
        .pipe(sass())
        .pipe(gulp.dest(mediaCssPath))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './public'
        }
    });

    gulp.watch('./src/style/scss/*.scss', ['styles']);
    gulp.watch('./src/style/scss/media.scss', ['styles2']);
    gulp.watch('./public/**/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['styles','styles2', 'serve']);

But doesn't work.
How to implement it?

Answer 1

Just change the line to
or
Remove the styles2 task , it's redundant.