Angular SPAのブラウザ同期

Question

Angular SPAとブラウザ同期を使用しています。サイトのサービスは次のようになります。

gulp.task('serve', function() { 
    browserSync.init(null, { 
    server: { 
     baseDir: './', 
     middleware: [historyApiFallback()] 
    } 
    }); 
}); 

これは問題なく動作します。 historyApiFallback（npmモジュール）を使用すると、新しいURLパスに行くときにブラウザ同期がフリークアウトしないようにするには、index.htmlのサービスを続行する必要があります。

問題は、ファイルを見ることです。私はこれを試してみた：build-cssタスクは細かいトリガーするため

gulp.task('watch', function() { 
    watch('./src/scss/**/*.scss', function() { 
    runSequence('build-css', browserSync.reload); 
    }); 
}); 

時計のタスクは、作業を行います。その後、コンソールにはReloading Browsers...が記録され、ハングするだけです。ブラウザは決してCSSの注入やリロードを取得しません。私はここで間違って何をしていますか？

私はgulp-watchを故意にネイティブのガルプウォッチではないことに注意してください。

Answer 1

lite-serverを使用することをおすすめします。 BrowserSyncを簡単にカスタマイズできるラッパーで、SPAを簡単に処理できます（履歴APIを設定する必要はありません）。

package.jsonのscriptsオブジェクトにエントリを単純に追加し、次のコマンドを実行することで使用できます。npm run dev。

"scripts": { "dev": "lite-server" },

モジュールは自動的にファイルの変更を監視して、同期を維持します。だから、build-cssタスクが実行された後で（出力ファイルが変更されるため）、ブラウザを更新するので、あなたのgulpで動作します。

私は現在、角度1、角度2、およびvue.jsで使用しており、すべてでうまく機能しています。