Gulp 4+Browsersync任务异常：修改JS后浏览器刷新卡顿

环境信息 #

• Gulp Local v4.0.2, CLI v2.3.0
• Browsersync v2.26.13

你的Gulp配置代码 #

'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

问题回顾 #

你提到修改./resources/js/下的JS文件后，终端显示js和reload任务都正常执行，也输出了[Browsersync] Reloading Browsers...，但浏览器刷新卡住没反应；同时js任务能正常生成app.min.js，dev服务启动和文件监听都没有问题。

排查与解决方案 #

我之前碰到过几乎一模一样的情况，咱们一步步来定位解决：

1. 先确认代理目标地址是否正确 #

你用了process.env.PORT配置代理地址，但首先要检查.env文件里的PORT值是不是和Express服务实际运行的端口一致。比如如果你的Express服务跑在localhost:3000，那.env里必须是PORT=3000——如果代理地址错了，Browsersync根本连不上目标服务，自然刷新会卡住。

2. 确保文件完全写入后再触发刷新 #

Gulp的流操作是异步的，虽然终端显示js任务完成，但可能app.min.js还没完全写入磁盘就触发了reload。咱们调整下js任务，确保文件写入完成后再标记任务结束：

function js(done) {
  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/'))
    .on('end', done); // 监听流结束事件，确保文件写完再完成任务
}

这样reload任务会在文件完全生成后才执行，避免浏览器读取到不完整的文件导致刷新异常。

3. 检查Browsersync脚本是否成功注入 #

打开浏览器的开发者工具控制台，看看有没有[Browsersync] Connected的日志。如果没有，说明Browsersync的注入脚本没加载成功：

• 确保你代理的页面有完整的</body>标签，Browsersync需要这个位置来注入脚本；
• 可以在Browsersync的初始化配置里加上调试日志，观察注入过程：

  server.init({
    proxy: `http://localhost:${process.env.PORT}`,
    port: 3001,
    logLevel: 'debug', // 输出详细调试日志
    notify: true, // 显示刷新通知
    open: true // 自动打开浏览器
  })
  

4. 排除缓存干扰 #

有时候浏览器会缓存旧的app.min.js，即使文件更新了也不会读取新的。你可以：

• 清空浏览器缓存后再测试；
• 或者在js任务里给文件名加上哈希值（比如app.[hash].min.js），强制浏览器加载新文件；
• 也可以在Browsersync配置里禁用缓存：

  server.init({
    // 其他配置...
    cache: false
  })
  

5. 检查文件监听范围 #

如果你的JS文件有子目录，当前的./resources/js/*.js只会监听一级目录下的文件，子目录的修改不会触发任务。可以改成./resources/js/**/*.js来监听所有子目录的JS文件。

测试步骤 #

1. 停止当前的Gulp服务；
2. 按照上面的修改调整配置；
3. 清空浏览器缓存；
4. 重新启动gulp命令；
5. 修改JS文件，观察浏览器是否正常刷新。

内容的提问来源于stack exchange，提问作者N'Bayramberdiyev