Gulp v4 build, SCSS

gulpfile.js

const { src, dest, watch, parallel, series, done } = require('gulp'),
        gulpif = require('gulp-if'),
        del = require('del'),
        autoprefixer = require('gulp-autoprefixer'),
        gulp_file_include = require('gulp-file-include'),
        sass = require('gulp-sass'),
        cleancss = require('gulp-clean-css'),
        uglify = require('gulp-uglify'),
        concat = require('gulp-concat'),
        browserSync = require('browser-sync').create()

const Paths = {
  DIST        : 'dist',

  SRC_CSS     : [ 'src/css/*.css', 'src/css/plugin/*.css' ],
  DIST_CSS    : 'dist/css',

  SRC_SASS    : 'src/scss/styles.scss',
  WATCH_SASS  : 'src/scss/**/*',

  SRC_HTML    : 'src/html/**/!(_)*.html',
  WATCH_HTML  : 'src/html/**/*',

  SRC_JS      : 'src/js/**/*',
  DIST_JS     : 'dist/js',
  WATCH_JS    : 'src/js/**/*',

  SRC_IMG     : 'src/img/**/*',
  DIST_IMG    : 'dist/img',

  SRC_FONTS   : 'src/fonts/*',
  DIST_FONTS  : 'dist/fonts'
}



// const production = null;

// if(production) {
//   console.log("-------------------");
//   console.log(" PRODUCTION BUILD");
//   console.log("-------------------");
// }

function scss() {
  return src( Paths.SRC_SASS )
    .pipe(sass({outputStyle: 'expanded'}))
      .on("error", sass.logError)
    // .pipe(gulpif(production, autoprefixer()))
    // .pipe(gulpif(production, cleancss()))
    .pipe(dest(Paths.DIST_CSS))
    .pipe(browserSync.stream())
}

function js() {
  return src(Paths.SRC_JS)
    // .pipe(concat({path: "bundle.js"}))
    // .pipe(uglify())
    .pipe(dest(Paths.DIST_JS))
    .pipe(browserSync.stream())
}

function html() {
  return src(Paths.SRC_HTML)
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
  }))
    .pipe(dest(Paths.DIST))
    .pipe(browserSync.stream())
}

function images() {
  return src(Paths.SRC_IMG)
    .pipe(dest(Paths.DIST_IMG))
    .pipe(browserSync.stream())
}

function fonts() {
  return src(Paths.SRC_FONTS)
    .pipe(dest(Paths.DIST_FONTS))
    .pipe(browserSync.stream())
}

function clean() {
  return del([
    Paths.DIST + '/**/*'
  ])
}

function cleanBuild(done) {
  return series(
    clean,
    parallel(html, js, scss, images, fonts)
  )(done)
}

function watchers() {
  browserSync.init({
    server: {
      baseDir: Paths.DIST,
    },
    ui: {
      port: 8080
    },
    notify: false
  })

  watch(Paths.WATCH_PUG, html)
  watch(Paths.WATCH_JS, js)
  watch(Paths.WATCH_SASS, scss)
  watch('dist/**/*.*').on('change', browserSync.reload)
}

exports.html       = html
exports.js         = js
exports.scss       = scss
exports.images     = images
exports.fonts      = fonts
exports.watchers   = watchers
exports.clean      = clean
exports.cleanBuild = cleanBuild

exports.default = series(parallel(scss, html), watchers)