Gulp 4-任务无法通过Browsersync正常运行

如何解决Gulp 4-任务无法通过Browsersync正常运行

Gulp本地v4.0.2，CLI v2.3.0
Browsersync v2.26.13

gulpfile.js ：

'use strict'

const gulp        = require('gulp')
const concat      = require('gulp-concat')
const babel       = require('gulp-babel')
const uglify      = require('gulp-uglify')
const browserSync = require('browser-sync')

require('dotenv').config()

const server = browserSync.create()

function js() {
    return gulp
        .src(['./resources/js/main.js','./resources/js/theme.js'])
        .pipe(
            babel({
                presets: ['@babel/env'],})
        )
        .pipe(uglify())
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('./public/assets/js/'))
}

function serve(done) {
    server.init({
        proxy: `http://localhost:${process.env.PORT}`,port: 3001,})
    done()
}

function reload(done) {
    server.reload()
    done()
}

function watch() {
    return gulp.watch('./resources/js/*.js',gulp.series(js,reload))
}

const dev = gulp.series(js,serve,watch)

exports.default = dev

此设置与Gulp文档中的this example非常相似。

在localhost:3000上代理快速服务器，并监视JavaScript文件的更改。

问题

当我更改位于./resources/js/的任何JavaScript文件时，浏览器重新加载未完成。我可以看到 js 任务在创建./public/assets/js/app.min.js文件时正常工作。

当我按下gulp命令时，它将作为默认任务成功运行任务 dev （gulp.series(js,watch)），并开始监视更改。更改并保存JavaScript文件后，js和reload任务开始运行。但是浏览器重新加载卡住了，什么也没有发生。

我更新并保存.js文件时终端的输出：

[15:39:16] Starting 'js'...
[15:39:16] Finished 'js' after 61 ms
[15:39:16] Starting 'reload'...
[15:39:16] Finished 'reload' after 2.03 ms
[browsersync] Reloading browsers...

解决方法

esm v3.2.25
express v4.17.1

花费了数小时之后，我终于发现我的节点服务器有问题。我在启用esm加载程序的情况下运行它。

我正在像这样运行服务器：

nodemon -r esm app.js

解决方案

当我以这种方式启动快递服务器时，一切都按预期进行：

nodemon app.js

但是，我仍然不确定这是最佳解决方案。

我不知道为什么启用esm会导致麻烦并阻止Browsersync重新加载。