gulpfile.js

const pkg = require('./package.json')
const path = require('path')
const gulp = require('gulp')
const sass = require('sass')
const rename = require('gulp-rename')
const postcss = require('gulp-postcss')
const webpack = require('webpack-stream')
const through = require('through2');

// a custom pipeable step to transform Sass to CSS
function compileSass() {
  return through.obj( ( vinylFile, encoding, callback ) => {
    const transformedFile = vinylFile.clone();

    sass.render({
        data: transformedFile.contents.toString(),
        includePaths: ['css/']
    }, ( err, result ) => {
        if( err ) {
            console.log( vinylFile.path );
            console.log( err.formatted );
        }
        else {
            transformedFile.extname = '.css';
            transformedFile.contents = result.css;
            callback( null, transformedFile );
        }
    });
  });
}

gulp.task('js', () => gulp.src(['js/main.js'])
    .pipe(webpack({
        mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
        performance: {
            hints: false
        },
        resolve: {
            modules: ['js', 'node_modules']
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /(node_modules)/
                }
            ]
        }
    }))
    // .pipe(rename('main.js'))
    .pipe(gulp.dest('./dist')))

gulp.task('css', () => gulp.src(['css/main.scss'])
    .pipe(compileSass())
    .pipe(postcss())
    .pipe(rename('main.css'))
    .pipe(gulp.dest('./dist')))

gulp.task('build', gulp.parallel('js', 'css'))

gulp.task('default', () => {
    gulp.watch([ 'js/**.*', 'js/*/**.*' ], gulp.series('js'))
    gulp.watch([ 'css/**.*', 'css/*/**.*' ], gulp.series('css'))
    gulp.parallel('js', 'css')()
})