Преобразование файла Gulp 3 в Gulp 4

Question

У меня есть gulpfile.js, который я пытаюсь преобразовать в Gulp 4 и Webpack 4. Я просто обновил все до последней версии и приступил к устранению каждой ошибки.

У меня есть его для компиляции и обслуживания, но он не смотрит и не синхронизируется правильно.

Я думаю, что он компилируется дважды из-за нестабильности вложенных функций, и я получаю эту ошибку при изменении scss:

ConcurrentCompilationError in plugin "webpack-stream"

Я смотрел на группу Gulp 4шаблоны, и я изо всех сил пытался истолковать мои ограниченные навыки JS.Я не абсолютный новичок, но я и не ниндзя.

Вот текущая версия Франкенштейна ... любая помощь в ее оптимизации и использовании в Gulp 4 / Webpack 4 будет принята с благодарностью:

const browserSync = require('browser-sync').create();
const gulp = require('gulp');
const php = require('gulp-connect-php');
const project = require('./package.json').project;
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const webpackStream = require('webpack-stream');

const compile = () => {
  return gulp.src(`${project.js}/index.js`, { allowEmpty: true })
    .pipe(
      webpackStream(webpackConfig, webpack)
        .on('error', (err) => {
          console.log('WEBPACK ERROR', err);
        })
    )
    .pipe(gulp.dest('../web'))
    .pipe(browserSync.stream({
      match: '**/*.css',
    }));
};
const watchMarkup = () => {
  gulp.watch(['**/*.html'], () => {
    browserSync.reload();
  });
};
const watchScript = () => {
  gulp.watch([
    `${project.src.js}/**/*.js`,
    `${project.src.js}/**/*.jsx`,
  ], () => {
    browserSync.reload();
  });
};
const watchStyle = () => {
  gulp.watch(`${project.src.scss}/**/*.scss`, () => {
    browserSync.reload();
  });
};

const sync = () => {
  browserSync.init({
    proxy: '127.0.0.1:8010',
    ghostMode: false,
    host: 'localhost',
    open: true,
    notify: false,
    port: 8000,
  });
};

const connectPHP = () => {
  php.server({ base: '../web/', port: 8010, keepalive: true });
};

const watch = gulp.parallel(watchMarkup, watchScript, watchStyle);
const serve = gulp.series(compile, gulp.parallel(connectPHP, sync), watch);

gulp.task('start', gulp.series(compile, serve));

gulp.task('default', gulp.series['compile']);