New Gulpfile config

gulpfile.js

// of course gulp
const {src, dest, parallel, series, watch} = require('gulp');

// css
const sass          = require('gulp-sass');
sass.compiler       = require('node-sass');
const autoprefixer  = require('autoprefixer');
const cssnano       = require('gulp-cssnano');
const rucksack      = require('rucksack-css');
const magicImporter = require('node-sass-magic-importer');
const gcmq          = require('gulp-group-css-media-queries');
const postcss       = require('gulp-postcss');

// js
const uglifyjs = require('uglify-es');
const composer = require('gulp-uglify/composer');
const minify   = composer(uglifyjs, console);
const babel    = require('gulp-babel');

// utilities
const plumber     = require('gulp-plumber');
const sourcemaps  = require('gulp-sourcemaps');
const Fiber       = require('fibers');
const merge2      = require('merge2');
const rename      = require('gulp-rename');
const concat      = require('gulp-concat');
const gulpif      = require('gulp-if');
const browserSync = require('browser-sync').create();

// variables
const scssPackageFiles = [
    './style.css'
];
const scssFiles        = [
    './sass/**/*.scss'
];
const mainStyleScss    = './sass/style.scss';

/**
 * CSS Compile
 */
function cssCompile() {
    return merge2(
        src(mainStyleScss)
            .pipe(plumber())
            .pipe(sass({
                fiber   : Fiber,
                importer: magicImporter()
            })).on('error', sass.logError)
    )
        .pipe(postcss([
            rucksack(),
            autoprefixer({
                flexbox: true,
                grid   : true
            })
        ]))
        .pipe(gcmq())
        .pipe(cssnano({
            discardComments: {
                removeAll: false
            }
        }))
        .pipe(concat('style.css'))
        .pipe(dest('./'))
        .pipe(browserSync.stream());
}

/**
 * Server
 * @returns {*|BrowserSync|Server|undefined|void}
 */
function startServer() {
    return browserSync.init({
        // proxy        : '',
        server       : './',
        notify       : false,
        open         : false,
        injectChanges: true
    });
}

// reload
function reloadServer(cb) {
    browserSync.reload();
    cb();
}

/**
 * Watch Files
 */
function watchFiles() {
    // watch scssFiles
    watch(scssFiles, {usePolling: true}, cssCompile);
}

// complex tasks
const devServer = series(cssCompile, parallel(startServer, watchFiles));

// tasks
exports.cssCompile  = cssCompile;
exports.watchFiles  = watchFiles;
exports.startServer = startServer;
exports.default     = devServer;