Setting gulp to work optimally with scss?

Question

Node.js

I decided to set up gulp for convenient work with projects. I set up video tutorials at first, I seemed to understand everything, but now I swam from ignorance of js. I would like to set it up a little differently than now. More specifically 1) gulp-sass worked on errors with indentation or nesting and in general sass errors that I made. 2) Style.scss saved in 2 formats style.css style.min.css and it all worked with browser-sync
This is the gulpfile I have at the moment

var gulp = require ('gulp');
var rename = require ('gulp-rename');
var sass = require ('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require ('browser-sync').create();

function css_style(done) {
  gulp.src('./scss/**.*')
  .pipe(sourcemaps.init())
  .pipe(sass({
    errorLogToConsole: true,
    outputStyle: 'compressed'
  }))
    .on('error', console.error.bind(console))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {
    cascade: true
  }))
      
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css/'))
    .pipe(browserSync.stream());
  
  done();
}

function sync (done) {
  browserSync.init({
    server: {
      baseDir: "./"
    },
    port: 3000
    });
    done();
  
}

function browserReload(done) {
  browserSync.reload();
  done()
}

function print(done) {
  console.log("hi");
  done();
}

function wachSass() {
  gulp.watch("./scss/**/*", css_style);
}

function watchFile() {
  gulp.watch("./scss/**/*", css_style);
  gulp.watch("./**/*.html", browserReload);
  gulp.watch("./**/*.php", browserReload);
  gulp.watch("./**/*js", browserReload);
  
}

gulp.task('default', gulp.parallel(watchFile, sync));

If possible, explain because I'm tired of copy-paste, I want to learn gulp myself

PS what is the difference between sass and gulp-sass