問題タブ [browser-sync]

gulpfile.js でいくつかの異なることを試して、Gulp のBrowserSync (LiveReload ではない) でHTML の自動リロードが機能するようにしましたが、どれも機能しませんでした。この最後の試行でうまくいくと思いましたが、うまくいきません。私は何が欠けていますか？

ここに私のgulpfile.js全体があります：

先週、小さな JavaScript プロジェクト用にゼロから gulpfile を作成してみました。BrowserSync を使用してコードをコンパイルし、ブラウザー (Chrome) をリロードすることにしました。週末を通してうまく機能し、私はやり遂げました。ただし、昨日プロジェクトを開いたような気がしますが、「gulp」コマンドを実行すると、ブラウザーに接続せず、「Connected to BrowserSync」メッセージが表示され、自動再読み込み機能が提供されます。ただし、コンソールでは、ファイルが更新およびコンパイルされているという通知が引き続き表示されます。

これがどのように起こるか誰にも分かりませんか？

私が使用しているgulpfileは次のとおりです。

アドバイスをありがとう！

gulp と browser-sync を使用して、次のように API リクエストをリダイレクトしようとしています。

しかし、呼び出しが API に送信されると、次の応答が返されます。

私が間違っていることについて何か考えはありますか？

私はgrunt-browser-sync仕事をするのに近づいていますが、まだそこにはいません。

私はこの Gruntfile を思いつきました:

私が欲しいのは次のとおりです。

1. 端末に入力すると、ブラウザの静的サーバー ページでgrunt watch自動的に開かれます。index.html
2. CSS、JS、または画像が変更されたときにライブ リロードするページ。

私の構成で何が起こるかは次のとおりです。

1. ファイルを保存するときだけ、新しいブラウザ ウィンドウが開きます
2. 何かを保存するたびに、複数のブラウザーウィンドウが開き、localhost数が変化し続け、プラグインがまったく役に立たなくなります

ファイルの可能なすべての場所に登録したことは承知しtasks : ['browserSync']ていますが、それが browser-sync が何かを行う唯一の方法です。私はこれで十分だと思っていました：

grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);

しかし、私はそれで運がありません。browser-sync がトリガーされますが、静的サーバーは開かれていません。

私は基本的な React/Flux アプリケーションを構築しており、ルーティングには react-router-component を使用し、ビルド変更時のライブ リロードには browser-sync を使用し、依存性注入には browserify を使用しています。

私が抱えている問題は、ライブ リロードまたはリロードがそうでないパス/(つまり/profile、/gallery、など) で発生すると、GET できません/path(またはそのための任意のルート) というエラー メッセージが表示されることです。

これは、単一ページのアプリケーションであり、すべてのルーティングがクライアントで行われるという事実と関係があると思われます。

これが私のブラウザ同期設定です（非常に基本的なものです）。ミドルウェアを追加する必要があるかもしれないと思いますが、実際にミドルウェアに何を入れればよいかわかりません。

私の設定は、想定されているすべてのことを行いますが、ブラウザーを更新することはありません。手動で更新すると、変更があります。デフォルトの localhost:3000 に接続しています。なぜそうなのか、それをデバッグする方法はありますか?

gulpfile.js:

コンソール出力の例: