Use Laravel Mix with a basic WordPress theme like Underscores. So much easier than messing around with Gulp etc.

functions.php

<?php 

/**
 * Take advantage of Mix's cache busting function
 */
function asset( $path ) {

	// Asset manifest file from Mix
	$manifest =  get_template_directory_uri() . '/dist/mix-manifest.json';
	$manifest_array = json_decode(file_get_contents($manifest), true);

	//Full asset path
	return get_template_directory_uri() . '/dist' . $manifest_array[$path];
}

/**
 * Enqueue scripts and styles.
 */
function mysite_scripts() {

  wp_enqueue_style( 'app-style', asset('/css/style.css'), array(), null );

  wp_enqueue_script( 'app-scripts', asset('/js/scripts.js'), array('jquery'), null, true );

}
add_action( 'wp_enqueue_scripts', 'mysite_scripts' );

package.json

{
  "dependencies": {
    "laravel-mix": "^6.0.44",
  },
  "devDependencies": {
    "browser-sync": "^2.27.10",
    "browser-sync-webpack-plugin": "^2.3.0",
    "copy-webpack-plugin": "^5.1.1",
    "imagemin-webpack-plugin": "^2.4.2",
    "laravel-mix-imagemin": "^1.0.3",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.52.1",
    "sass-loader": "^12.1.0"
  }
}

webpack.mix.js

// https://laravel-mix.com/docs/6.0/installation
// `npx mix` to compile
// `npx mix watch` to run browsersync and watch files

let mix = require('laravel-mix');
require('laravel-mix-imagemin');

mix
    .setPublicPath('dist')
    .browserSync({
        proxy: 'mysite.test',
        files: ['./**/*.php', './**/*.js', './**/*.scss']
    });

mix
    .js('./src/js/scripts.js', 'js').version()

mix
    .sass('./src/scss/style.scss', 'css').version()
    .options({
        processCssUrls: false
    })
    .sourceMaps(true, 'source-map');

mix.imagemin(['./img/**.*', './img/icon/**.*']);

mix.disableNotifications();