Gulp + SCSS + BrowserSync Example

gulpfile.js

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

var Paths = {
  HERE: './',
  DIST: 'dist/',
  CSS: './assets/css/',
  SCSS_TOOLKIT_SOURCES: './assets/scss/blk-design-system.scss',
  SCSS: './assets/scss/**/**'
};

const compile = () => {
  return gulp.src(Paths.SCSS_TOOLKIT_SOURCES)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(Paths.HERE))
    .pipe(gulp.dest(Paths.CSS))
}

const reload = (cb) => {
  browserSync.reload()
  cb()
}

gulp.task('reload', reload)

gulp.task('compile-scss', compile);

gulp.task('watch', function(cb) {
  gulp.watch(Paths.SCSS, gulp.series(compile, reload));
  gulp.watch('./index.html', reload)
  cb()
});

gulp.task('open', function() {
  compile()
  browserSync.init({
    server: {
      baseDir: '.'
    },
  })
})

package.json

{
  "name": "annearchy",
  "description": "Annearchy.Digital Website",
  "version": "1.0.1",
  "homepage": "http://Annearchy.Digital",
  "author": "Erik Ralston",
  "license": "MIT License",
  "devDependencies": {
    "browser-sync": "^2.26.13",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-clean": "^0.3.2",
    "gulp-cli": "^2.3.0",
    "gulp-install": "^1.1.0",
    "gulp-open": "^3.0.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.3",
    "rimraf": "^3.0.2"
  },
  "scripts": {
    "start": "gulp open watch"
  }
}