バンドリングが完了したら、私はbrowsersync.reload()を使用しています。 が初めてで、それがうまく働いたが、アプリケーションが大きく成長した後に、ウェブページはこのメッセージとリロードでJavaScriptを読み込むことができませんでした:browsersync.reloadのERR_CONTENT_LENGTH_MISMATCH
http://localhost:4000/js/bundle.jsネットをGET :: 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();
}
});
}
私はエクスプレスでブラウザ同期を使用していますので、プロキシを使用しました。私は速いが、それはwatchifyで動作し、ビルドにpersistify使用してい
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();
}
をので、私は時計を使用していない:コードの下にはスクリプトの一部をバンドルされています。バンドルが完了したときに起動する 'end'イベントが表示されるので、browerSync.reloadを呼び出してページをリロードしました。
リロード自体は問題ではありませんが、JavaScriptの読み込みに失敗しました。
トリガーされた終了イベントはそれほど前に存続しますか?または速報/ブラウザ同期の問題の何かか?
私が推測できるのは、終了イベントが発生したが、ストリームがまだファイルを書き込んでいるため、実際のファイルサイズが正しくなく、取得が拒否されることだけです。
意図的に私はbrowsersync.reload()の前にいくつかの遅延を与えました、それは動作しますが、私はこれをしたくありません。
私は逃したものがありますか?または私は間違ったアプローチをしたのですか?どんなアドバイスも非常に感謝しています。