webpack - 将 Gulp 3 文件转换为 Gulp 4

Question

我有这个gulpfile.js，我正在尝试将其转换为 Gulp 4 和 Webpack 4。我基本上只是将所有内容都升级到最新版本并着手解决每个错误。

我已经让它编译和服务，但它不能正确观看和同步。

我认为由于 janky 函数嵌套而编译了两次，并且我在 scss 更改时收到此错误：

ConcurrentCompilationError in plugin "webpack-stream"

我查看了一堆 Gulp 4 样板，并尽我所能用我有限的 js 技能来解释。我不是一个完全的菜鸟，但我也不是一个 js 忍者。

这是当前的 Frankenstein 版本...在 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']);

标签： webpackgulp