Настройка gulp для оптимальной работы с scss?

Question

[Сергей Васенин]

Решил настроить gulp для удобной работы с проектами. Настраивал по видео урокам по началу все вроде понимал но сейчас поплыл от незнания js. Хотелось бы настроить немного иначе чем сейчас. А конкретнее 1) gulp-sass срабатывал на ошибках с отступами или вложенность да и вообще ошибки sass которые я допустил. 2) Style.scss сохранял в 2х форматах style.css style.min.css и все это работало с browser-sync

Вот такой gulpfile я имею на данный момент

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));

По возможности объяснить так как копипаст надоел хочу познать gulp сам

P.S в чем отличие sass и gulp-sass