Gulp v4 build, LESS

gulpfile.js

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

const Paths = {
  DIST        : 'dist',

  SRC_HTML    : 'src/html/**/*',
  WATCH_HTML  : 'src/html',

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

  SRC_LESS    : 'src/less/styles.less',
  WATCH_LESS  : 'src/less/**/*',

  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 lesscss() {
  return src( Paths.SRC_LESS )
    .pipe(less({
      paths: [ path.join(__dirname, 'node_modules', 'metro4', 'source') ]
    }))
      // .on("error", LESS.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(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, lesscss, images, fonts)
  )(done)
}

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

  watch(Paths.WATCH_HTML, html)
  watch(Paths.WATCH_JS, js)
  watch(Paths.WATCH_LESS, lesscss)
  watch('dist/**/*.*').on('change', browserSync.reload)
}

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

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