Give this a try:
Here are two functions, one for CSS and another for SASS.
To get started, run the following command:

const { src, dest } = require("gulp");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
sass.compiler = require("node-sass");

function css() {
    return src("src/css/*.css")
        .pipe(concat("style.css"))
        .pipe(sassGlob())
        .pipe(
            sass({
                outputStyle: "compressed" // Options: expand, compact, or compressed
            }).on("error", sass.logError)
        )
        .pipe(
            autoprefixer({
                cascade: true
            })
        )
        .pipe(dest("build/css/"));
}

function scss() {
    return src('src/scss/style.scss') // Include all your files in style.scss
        .pipe(sassGlob())
        .pipe(
            sass({
                outputStyle: 'compressed' // Choose from expand, compact, or compressed
            })
                .on('error', sass.logError)
        ).pipe(
            autoprefixer({
                cascade: true
            })
        ).pipe(dest('build/scss/'));
}

exports.css = css;
exports.scss= scss;

To resolve the issues in your code, consider the following adjustments:

gulp.task('compile-sass', function() {
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // convert Sass to CSS
        .pipe(gulp.dest('css'));
});

gulp.task('watch-files', function() {
    gulp.watch(['scss/*.scss'], gulp.series('compile-sass'));
});

gulp.task('run-default', gulp.series('compile-sass', 'watch-files'));

Alternatively, you can refactor your functions as shown below:

function compileSass() {   
    return gulp.src(['scss/*.scss'])
        .pipe(sass()) // convert Sass to CSS
        .pipe(gulp.dest('css'));
};

function watchChanges() {
    gulp.watch(['scss/*.scss'], gulp.series(compileSass));
});

gulp.task('default', gulp.series(compileSass, watchChanges));

My gulp file is set up to compile and minify CSS and JS files. It also contains some configurations for images and PHP files, although they are not currently being utilized.

const gulp = require('gulp'),
  gutil = require('gulp-util'),
  touch = require('gulp-touch-cmd'),
  plugin = require('gulp-load-plugins')(),
  merge = require('merge-stream');

// Define paths for different types of assets
const SOURCE = {
  scripts: [
    'assets/scripts/**/*.js',
  ],
  styles: 'assets/style/scss/**/*.scss',
  images: 'assets/images/src/**/*',
  php: '**/*.php'
};

const ASSETS = {
  styles: 'assets/style/',
  stylesDist: 'assets/dist/style',
  scripts: 'assets/scripts/',
  scriptsDist: 'assets/dist/scripts',
  images: 'assets/images/',
  all: 'assets/dist/'
};

// Gulp task to compile Sass, Autoprefix, and minify CSS
gulp.task('styles', function () {

  const bulk = gulp.src(SOURCE.styles);

  return merge(bulk)
    .pipe(plugin.plumber(function (error) {
      gutil.log(gutil.colors.red(error.message));
      this.emit('end');
    }))
    .pipe(plugin.sourcemaps.init())
    .pipe(plugin.sass())
    .pipe(plugin.autoprefixer({
      browsers: [
        'last 2 versions',
        'ie >= 9',
        'ios >= 7'
      ],
      cascade: false
    }))
    .pipe(plugin.cssnano({ safe: true, minifyFontValues: { removeQuotes: false } }))
    .pipe(plugin.sourcemaps.write('.'))
    .pipe(gulp.dest(ASSETS.stylesDist))
    .pipe(touch());
});

// Gulp task to process JavaScript files
gulp.task('scripts', function () {

  return gulp.src(SOURCE.scripts)
   .pipe(plugin.plumber(function (error) {
     gutil.log(gutil.colors.red(error.message));
     this.emit('end');
   }))
   .pipe(plugin.sourcemaps.init())
   .pipe(plugin.babel({
     presets: ['es2015'],
     compact: true,
     ignore: ['what-input.js']
   }))
   .pipe(plugin.concat('scripts.js'))
   .pipe(plugin.uglify())
   .pipe(plugin.sourcemaps.write('.'))
   .pipe(gulp.dest(ASSETS.scriptsDist))
   .pipe(touch());
});

// Watch files for changes
gulp.task('watch', function () {
  gulp.watch(SOURCE.styles, gulp.parallel('styles'));
  gulp.watch(SOURCE.scripts, gulp.parallel('scripts'));
});

Here is another example of a gulp setup:

// Initializing required modules and packages for Gulp tasks
const { src, dest, watch, series, parallel } = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const replace = require('gulp-replace');

// File paths for SCSS and JS files
const files = { 
  scssPath: 'site/templates/styles/sass/**/*.scss',
  jsPath: 'site/templates/scripts/**/*.js'
}

// Gulp task for compiling SCSS to CSS
function scssTask(){    
  return src(files.scssPath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([ autoprefixer(), cssnano() ]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('site/templates/dist')
  );
}

// Gulp task for concatenating and minifying JS files
function jsTask(){
  return src([
    files.jsPath
  ])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(dest('site/templates/dist')
  );
}

// Generating cache busting string based on current time
const cbString = new Date().getTime();
function cacheBustTask(){
  return src(['index.html'])
    .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
    .pipe(dest('.'));
}

// Watching SCSS and JS files for changes
function watchTask(){
  watch([files.scssPath, files.jsPath], 
    series(
      parallel(scssTask, jsTask)
    )
  );    
}

// Default Gulp task definition
exports.default = series(
  parallel(scssTask, jsTask), 
  watchTask
);