BrowserSync 在使用 Docker 时不断重新加载

Question

当启动应用程序（在 http://localhost:3001 上）并编辑一些文件时，Browsersync 不断重新加载并且永不停止。但是，不使用 Docker 时不会发生这种情况。

这种行为有原因吗？我错过了什么吗？我正在使用"browser-sync": "^2.27.5" 和 Gulp 版本4.0.2。这是输出：

node_1      | [15:14:32] Finished 'images' after 1.32 min
node_1      | [15:14:32] Finished 'build' after 1.32 min
node_1      | [15:14:40] Using gulpfile /usr/src/app/gulpfile.mjs
node_1      | [15:14:40] Starting 'watch'...
node_1      | [Browsersync] Proxying: http://localhost:8000
node_1      | [Browsersync] Access URLs:
node_1      |  -----------------------------------
node_1      |        Local: http://localhost:8000
node_1      |     External: http://172.20.0.4:8000
node_1      |  -----------------------------------
node_1      |           UI: http://localhost:3001
node_1      |  UI External: http://localhost:3001
node_1      |  -----------------------------------
node_1      | [Browsersync] Watching files...
django_1    | [25/Aug/2021 15:15:37] "GET / HTTP/1.1" 200 45376
django_1    | [25/Aug/2021 15:15:38] "GET /static/js/index.js HTTP/1.1" 200 141793
django_1    | [25/Aug/2021 15:15:38] "GET /static/css/style.css HTTP/1.1" 200 5439548
node_1      | [15:15:48] Starting 'html'...
node_1      | ℹ - [HTML] Compiling...
node_1      | ✔ - [HTML] Success!
node_1      | [15:16:09] Finished 'html' after 21 s
node_1      | [15:16:09] Starting 'html'...
node_1      | ℹ - [HTML] Compiling...
node_1      | [Browsersync] Reloading Browsers... (buffered 214 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 72 events)
node_1      | ✔ - [HTML] Success!
node_1      | [15:16:34] Finished 'html' after 25 s
node_1      | [15:16:34] Starting 'html'...
node_1      | ℹ - [HTML] Compiling...
node_1      | [Browsersync] Reloading Browsers... (buffered 4 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 4 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 4 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 4 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 2 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 2 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 4 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 4 events)
node_1      | ✔ - [HTML] Success!
node_1      | [15:17:06] Finished 'html' after 32 s
node_1      | [15:17:06] Starting 'html'...
node_1      | ℹ - [HTML] Compiling...
node_1      | [Browsersync] Reloading Browsers... (buffered 36 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 6 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 51 events)
node_1      | [Browsersync] Reloading Browsers... (buffered 16 events)

我的 gulpfile 看起来像这样

gulp.task('watch', () => {
  browserSync.init({
    // The hostname is the name of your service in docker-compose.yml.
    // The port is what's defined in your Dockerfile.
    hostname: 'django',
    port: 8000,
    proxy: 'localhost:8000',
    open: false,
    reloadDelay: 1000,
    timestamps: true,
    files: ['./dist', './templates/local'],
  });

  gulp
    .watch(`${options.paths.src.js}/**/*.*`, gulp.series('scripts'))
    .on('change', browserSync.reload);
  gulp
    .watch(`${options.paths.src.css}/**/*.*`, gulp.series('styles'))
    .on('change', browserSync.reload);
  gulp
    .watch(`${options.paths.src.img}/**/*.*`, gulp.series('images'))
    .on('change', browserSync.reload);
  gulp
    .watch(`${options.paths.src.html}/**/*.*`, gulp.series('html'))
    .on('change', browserSync.reload);
});

docker-compose.yml

version: '3'

volumes:
  local_postgres_data: {}
  local_postgres_data_backups: {}
  notused:

services:
  postgres:
    build:
      context: .
      dockerfile: ./app/docker/postgres/Dockerfile
    image: webapp_prodcution_postgres
    volumes:
      - local_postgres_data:/var/lib/postgresql/data:Z
      - local_postgres_data_backups:/backups:z
    env_file:
      - ./app/.envs/.local/.env

  django:
    image: webapp_local_django
    build:
      context: .
      dockerfile: ./app/docker/django/Dockerfile
    volumes:
      - ./app/:/usr/src/app/
    command: /usr/src/app/docker/django/start_dev
    ports:
      - 8000:8000
    env_file:
      - ./app/.envs/.local/.env
    depends_on:
      - postgres

  node:
    image: webapp_local_node
    build:
      context: .
      dockerfile: ./app/docker/node/Dockerfile
    depends_on:
      - django
    volumes:
      - ./app/:/usr/src/app/
      - notused:/usr/src/app/node_modules/
    command: bash -c "rm -rf /usr/src/app/node_modules/* && npm run dev"
    ports:
      - '3000:3000'

Answer 1

也许有更好的方法，但对我有用的是：

在gulpfile 中，我创建了一个变量reload 并将超时选项设置为1 秒。

const reload = done => {
  setTimeout(() => {
    browserSync.reload();
  }, 1000);
  done();
};

接下来，我传递了reload 变量，如下所示：

// BEFORE
gulp
    .watch(`${options.paths.src.html}/**/*.*`, gulp.series('scripts'))
    .on('change', browserSync.reload);


// AFTER
gulp
    .watch(`${options.paths.src.html}/**/*.*`, gulp.series('scripts'))
    .on('change', reload);

Answer 2

在深入研究细节后，我能够缩小我这边的问题。我将browsersync 与静态站点生成器一起使用。当任何文件更改时，它会重新生成整个站点，从而导致一到两千个文件更改。 browsersync 似乎需要很长时间才能接收所有这些事件（可能是 Windows 问题），因此根据 reload* 设置，它可能会导致浏览器几乎不断地重新加载。

具体来说，将reloadThrottle 设置为0 以外的任何内容是个坏主意，因为每个change 事件仅包含3-4 个文件，因此将此设置为1000 将在几分钟内每秒重新加载浏览器. reloadDelay 似乎有点帮助，但主要是在掩饰问题。由于很长一段时间内每隔几百毫秒就会发生变化，这仍然会导致每隔reloadDelay 周期不断地重新加载。

最后，为reloadDebounce 找到一个良好的中间立场对我有用。将其设置得太高，导致需要等待太长时间才能收到所有更改事件，并且手动重新加载速度更快。将其设置得太低会导致它重新加载太快。将其设置得恰到好处（在我的情况下介于 500-1000 之间）允许它相当快地重新加载，但比特并没有经常重新加载。它仍然有可能在重新加载之前等待所有文件更改，但这种情况很少见。

因此，所有配置属性的详细文档有望帮助其他人！

• reloadDelay - 发生更改后，可能需要在页面刷新之前进行其他处理。此值会在 browsersync 在页面重新加载之前处理任何更改事件之后添加延迟。这不应与reloadDebounce 混淆，因为它不一定会持续推迟重新加载，直到所有更改发生后，它只是在此设置期间延迟初始重新加载。
• reloadDebounce - 确保在触发浏览器重新加载之前配置的时间段内没有新的更改。如果该值设置得太高，并且更改在很长一段时间内缓慢发生，这可能会延迟浏览器重新加载很长时间（但会阻止多次连续重新加载）。
• reloadThrottle - 随着变化的发生，这些变化被分组到“事件”中。一个事件可能包含一个更改或多个更改。如果重新加载限制设置为非零值，则 browsersync 将限制处理速率，以便每x 毫秒仅处理其中一个事件。因此，如果您的更改事件缓慢过滤（导致小批量），则设置此值将导致事件一次处理一个，并有延迟，并且（可能）每次都重新加载浏览器。