Rendering 2 scss and output them via Gulp?

Question

I'm new to Gulp, this Gulp setting is already rendered 'main.scss' but I want to add 1 more scss file named 'styles.scss' into this Gulp but kinda stuck. How can I insert this new scss ? should I create a new task for new scss? well, I did but it seems that I'm doing it the wrong way. how to add it in the correct way?

<pre><code> 

    "use strict";
    var gulp = require('gulp'),
      concat = require('gulp-concat'),
      uglify = require('gulp-uglify'),
      rename = require('gulp-rename'),
        sass = require('gulp-sass'),
        maps = require('gulp-sourcemaps'),
         del = require('del'),
         autoprefixer = require('gulp-autoprefixer'),
         browserSync = require('browser-sync').create(),
         htmlreplace = require('gulp-html-replace'),
         cssmin = require('gulp-cssmin');
    gulp.task("concatScripts", function() {
        return gulp.src([
            'assets/js/vendor/jquery-3.2.1.slim.min.js',
            'assets/js/vendor/popper.min.js',
            'assets/js/vendor/bootstrap.min.js',
            'assets/js/functions.js'
            ])
        .pipe(maps.init())
        .pipe(concat('main.js'))
        .pipe(maps.write('./'))
        .pipe(gulp.dest('assets/js'))
        .pipe(browserSync.stream());
    });
    gulp.task("minifyScripts", ["concatScripts"], function() {
      return gulp.src("assets/js/main.js")
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('dist/assets/js'));
    });
    gulp.task('compileSass', function() {
      return gulp.src("assets/css/main.scss")
          .pipe(maps.init())
          .pipe(sass().on('error', sass.logError))
          .pipe(autoprefixer())
          .pipe(maps.write('./'))
          .pipe(gulp.dest('assets/css'))
          .pipe(browserSync.stream());
    });
    gulp.task("minifyCss", ["compileSass"], function() {
      return gulp.src("assets/css/main.css")
        .pipe(cssmin())
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('dist/assets/css'));
    });
    gulp.task('watchFiles', function() {
      gulp.watch('assets/css/**/*.scss', ['compileSass']);
      gulp.watch('assets/js/*.js', ['concatScripts']);
    })
    gulp.task('browser-sync', function() {
        browserSync.init({
            server: {
                baseDir: "./"
            }
        });
    });
    gulp.task('clean', function() {
      del(['dist', 'assets/css/main.css*', 'assets/js/main*.js*']);
    });
    gulp.task('renameSources', function() {
      return gulp.src(['*.html', '*.php'])
        .pipe(htmlreplace({
            'js': 'assets/js/main.min.js',
            'css': 'assets/css/main.min.css'
        }))
        .pipe(gulp.dest('dist/'));
    });
    gulp.task("build", ['minifyScripts', 'minifyCss'], function() {
      return gulp.src(['*.html', '*.php', 'favicon.ico',
                       "assets/img/**", "assets/fonts/**"], { base: './'})
                .pipe(gulp.dest('dist'));
    });
    gulp.task('serve', ['watchFiles'], function(){
      browserSync.init({
            server: "./"
        });
        gulp.watch("assets/css/**/*.scss", ['watchFiles']);
        gulp.watch(['*.html', '*.php']).on('change', browserSync.reload);
    });
    gulp.task("default", ["clean", 'build'], function() {
      gulp.start('renameSources');
    });

</code></pre>

Any help really appreciated. Thanks

Answer 1

Assuming styles.scss is in the same folder as main.scss:

gulp.task('compileSass', function() {
          // src changed so that all .scss files in folder are used
          return gulp.src("assets/css/*.scss")
              .pipe(maps.init())
              .pipe(sass().on('error', sass.logError))
              .pipe(autoprefixer())
              .pipe(maps.write('./'))
              .pipe(gulp.dest('assets/css'))
              .pipe(browserSync.stream());
        });

        gulp.task("minifyCss", ["compileSass"], function() {
          // same as above : gulp.src takes a glob of all .css files in css folder
          return gulp.src("assets/css/*.css")
             .pipe(cssmin())
             // name each file with the suffix, rest of name will be same as before
            .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest('dist/assets/css'));
        });

    gulp.task('clean', function() {
          // changed css item so all .css files are deleted
          del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
        });