Gulp 4

const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const browsersync = require('browser-sync').create();
const clean = require('gulp-clean');
const cleancss = require('gulp-clean-css');
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
​
// Extra included dependencies
​
const {src, task}= require('gulp');
​
​
const paths = {
    src: {
        html: {
            files: './src/html/**/*.html',
        },
        js: {
            files: './src/js/**/*.js'
        },
        scss: {
            files: './assets/scss/atmos.scss'
        },
​
    },
    dist: {
        base: {
            dir: './'
        },
        css: {
            dir: 'assets/css',
            files: 'assets/css/**/*.css',
            minFiles: 'assets/css/**/*.min.css',
        },
        html: {
            files: 'dist/**/*.html'
        },
        js: {
            dir: 'dist/assets/js',
            files: 'dist/assets/js/**/*.js',
            minFiles: 'dist/assets/js/**/*.min.js'
        },
    },
    node: {
        dir: './node_modules'
    },
    package: {
        files: './package.json'
    }
};
​
gulp.task('browsersync', callback => {
    browsersync.init({
        server: {
            baseDir: paths.dist.base.dir,
            // Added so that we can have the server use base urls vs requiring .html
            serveStaticOptions: {
                extensions: ["html"]
            }
        }
    });
    callback();
});
​
gulp.task('browsersyncReload', callback => {
    browsersync.reload();
    callback();
});
​
gulp.task('clean', () => {
    return gulp.src([paths.dist.css.dir, paths.dist.html.files, paths.dist.js.dir, paths.dist.libs.dir], {
        allowEmpty: true,
        read: false
    })
        .pipe(clean());
});
​
gulp.task('clean', () => {
    return gulp.src([paths.dist.css.dir], {
        allowEmpty: true,
        read: false
    })
        .pipe(clean());
});
​
gulp.task('clean:js', () => {
    return gulp.src([paths.dist.js.files, `!${paths.dist.js.minFiles}`], {
        read: false
    })
        .pipe(clean())
});
​
gulp.task('js', () => {
    return gulp
        .src(paths.src.js.files)
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(gulp.dest(paths.dist.js.dir))
});
gulp.task('scss', () => {
    return gulp
        .src(paths.src.scss.files)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(cleancss())
        .pipe(rename("atmos.min.css"))
        .pipe(gulp.dest(paths.dist.css.dir))
        .pipe(browsersync.stream());
});
​
gulp.task('watch', () => {
    gulp.watch([paths.src.html.files],
        gulp.series('browsersyncReload'));
    gulp.watch(paths.src.scss.files, gulp.series('scss'));
});
​
gulp.task('default', gulp.series('clean', gulp.parallel( 'scss'), gulp.parallel('browsersync', 'watch')));
​