browsersync.reload 上的 ERR_CONTENT_LENGTH_MISMATCH答案

【问题标题】：ERR_CONTENT_LENGTH_MISMATCH on browsersync.reloadbrowsersync.reload 上的 ERR_CONTENT_LENGTH_MISMATCH
【发布时间】：2017-03-14 07:40:20
【问题描述】：

捆绑完成后，我正在使用 browsersync.reload()。第一次，它运行良好，但应用程序变大后，网页在重新加载时无法加载 JavaScript 并显示此消息：

GET http://localhost:4000/js/bundle.jsnet::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();    
        }
    });
}

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

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，所以我没有使用 watch。如您所见，当捆绑完成时会触发“结束”事件，我调用了 browerSync.reload 来重新加载页面。

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

持久化触发的结束事件会这么早吗？或者这是 express/browser-sync 的某种问题？

我只能猜测是触发了结束事件，但流仍在写入文件，因此实际文件大小不正确并拒绝获取。

我故意在 browsersync.reload() 之前给了一些延迟，它可以工作，但我不想这样做。

有什么我错过的吗？还是我做错了方法？任何建议都会非常感激。

【问题讨论】：

标签： javascript gulp browserify browser-sync

【解决方案1】：

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

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

【讨论】：