gulp sass browser-sync

gulpfile.js

/**
 * NPM dependencies to install 
 * (npm i -D gulp gulp-sass ... )
 */
const gulp = require( "gulp" ),
	path = require( "path" ),
	sass = require( "gulp-sass" ),
	sourcemaps = require( "gulp-sourcemaps" ),
	autoprefixer = require( "gulp-autoprefixer" ),
	browserSync = require( "browser-sync" ).create() // Local server

const SRC = "src/",
	STYLES = {
		EXT: ".scss", // Style extension to watch
		SRC: path.join( SRC, "FOLDER" ),
		DIST: path.join( SRC, "FOLDER" ),
	},
	DIST = "dist" // ! not used for this setup

STYLES.WATCH = path.join( STYLES.SRC, "**/*" + STYLES.EXT ) // src/styles/**/*.scss


/**
 * Compile styles
 * Export sourcemaps
 * Autoprefix styles
 */
gulp.task( "styles", _ =>
	gulp.src( STYLES.WATCH )
		.pipe( sourcemaps.init() )
		.pipe( autoprefixer() )
		.pipe( sass.sync().on( "error", sass.logError ) )
		.pipe( sourcemaps.write() )
		.pipe( gulp.dest( STYLES.DIST ) ) )

/**
 * Watch styles
 * Trigger "styles" task before beginning watch 
 * (otherwise no style would be compiled until a change is made)
 */
gulp.task( "styles:watch", [ "styles" ], _ =>
	gulp.watch( STYLES.WATCH, [ "styles" ] ) ) // Trigger "styles" task on style file change


/**
 * Server start
 * (use "browser-sync init" cmd to generate config or pass object)
 */
gulp.task( "server", [], _ => {
  
	const _opts = require( "./bs-config" ) || {
		files: [ DIST + "**/*.{js,html,css}" ], // Refresh browser when your see a change in one of those files
		// notify: false, // Don't alert on refresh
		ui: false,
		server: {
			baseDir: [ DIST ], // Make files in ./dist available through ./ (ex src="random.js" for dist/random.js)
		},
	}
  
	return browserSync.init( require( "./bs-config" ) )
} )

/**
 * Run through cli with "gulp"
 */
gulp.task( "default", [ "server", "styles:watch" ] )