2017-03-14 2 views
2

バンドリングが完了したら、私は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()の前にいくつかの遅延を与えました、それは動作しますが、私はこれをしたくありません。

私は逃したものがありますか?または私は間違ったアプローチをしたのですか?どんなアドバイスも非常に感謝しています。

答えて

0

ブラウザ同期を開始した後にJavaScriptを実行することでこの問題を解決していました。

私はまだそれがどうして起こったのか分かりませんが、スクリプトが揺れていて、ブラウザがまだ動作している間にアクセスしようとしているようです。

関連する問題