Question

捆绑完成后我正在使用browsersync.reload（）。第一次，它运作良好，但在App变大之后，网页无法在重新加载时加载JavaScript，并显示以下消息：

获取http://localhost:4000/js/bundle.js net :: ERR_CONTENT_LENGTH_MISMATCH

这是我的gulpfile.js代码：

function serve() {
    let serverStarted = false;

    nodemon({ script: 'server.js' })
    .on('start', () => {
        if(!serverStarted) {
            serverStarted = true;

            browserSync.init(null, {
                proxy: `localhost:${config.port || 3000}`,
                port: config.proxyPort || 4000
            });

            gulp.watch(`${SRC_DIR}/html/**`, buildHtml);
            gulp.watch(`${SRC_DIR}/scss/**`, buildScss);

            gulp.watch(`${BUILD_DIR}/html/index.html`).on('change', browserSync.reload);

            // return empty stream
            return gutil.noop();    
        }
    });
}

我正在使用带快递的浏览器同步，所以我使用了代理。下面的代码是脚本的捆绑部分：

function buildJs() {
    const b = persistify()
    .add(`${SRC_DIR}/js/index.js`)
    .on('update', bundle)
    .on('log', gutil.log)

    function bundle() {
        let stream = b.bundle()
        .on('error', swallowError)
        .on('end', () => {
            gutil.log(`Building JS:bundle done.`);
            browserSync.reload();
        })
        .pipe(source('bundle.js'));

        return stream.pipe(gulp.dest(`${BUILD_DIR}/js`));
    }

    return bundle();
}

我正在使用persistify进行快速构建，它与watchify一起使用，因此我没有使用手表。正如你可以看到'end'事件，它在捆绑完成时触发，我调用了browerSync.reload来重新加载页面。

重新加载本身并不是问题，但它无法加载JavaScript，正如我所说的那样。

是否早先触发了终结事件？或者是来自express / browser-sync的一些问题吗？

只有我可以猜到结束事件被触发但是流仍在写文件，因此实际文件大小不正确并且拒绝获取。

有意地我在browsersync.reload（）之前给了一些延迟，它有效，但我不想这样做。

有没有我遗漏的东西？或者我做错了方法？任何建议都会非常感激。

Answer 1

我通过在浏览器同步开始后执行转换JavaScript来解决此问题。

我仍然不知道为什么会发生这种情况，但似乎脚本正在转换，浏览器会在它仍在工作时尝试访问。

在browsersync.reload上有ERR_CONTENT_LENGTH_MISMATCH

1 个答案: