当使用Docker时， BrowserSync会无限地重新加载

当启动应用程序(在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'

也许有更好的方法，但对我来说是这样的:

在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);

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

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

最后，为reloadDebounce找到一个好的中间立场对我来说是有效的。将它设置得太高，会导致需要等待太长时间才能接收到所有更改事件，并且手动重新加载会更快。设置过低会导致重新加载速度过快。将其设置得恰到好处(在我的例子中设置在500-1000之间)可以让它以相当快的速度重新加载，但不会太频繁地重新加载。它仍然有可能在重新加载之前等待所有文件更改，但这种情况很少见。

所以，所有配置属性的详细文档，希望能帮助其他人!

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

我的gulpfile看起来像这样

docker-compose.yml

相关内容

最新更新

热门标签：