問題タブ [browser-sync]

数日間、broswersync でこの問題を解決しようとしています。これに関するどんな助けも高く評価されます。

私の環境：

私は、浮浪者ボックス内のUbuntuのWindowsとサーバーを使用しています。私はポート転送をオンにしており、ポート 3000 を使用して vagrant のポート 3000 にマップしています。したがって、ホスト マシンから使用する URL はhttp://localhost:3000/index.htmlであり、外部からの場合はhttp://MY_IP_ADDRESS:3000/index.html です。

説明：

CSS インジェクション、リロード、フォーム同期、クリックがあり、すべてのブラウザーとデバイスで動作します。動作しないのは同期スクロールです。以下はシナリオです。

1. スクロール同期は、デスクトップ モードの Chrome でのみ機能します。つまり、デスクトップ モードの複数のウィンドウで Chrome で同じ URL を開くと、正常に機能します。
2. モバイル モードがオンの場合、Chrome およびデスクトップ モードでは、スクロールの同期が機能しません。
3. Firefox、Safari、IE でリンクを開くと、それらの間でスクロール同期が機能しません。
4. 複数のデバイスでリンクを開いて、異なるデバイスやブラウザ間でスクロールできません。

私の一杯:

私は Windows で作業していますが、私のサーバーは vagrant/ubuntu 上にあります。これは、ブラウザの同期と監視のための私の Gulp 設定です。

事前にご協力いただきありがとうございます..

gulp を使用していくつかの .less ファイルをコンパイルし、live-reload を使用してブラウザーに変更を挿入しています。

これは私が最初に作成したタスクです。

同じタスクを実行する別の gulp タスクを作成しましたが、クロス テストには live-reload の代わりに browser-sync を使用しました。

次に、両方のファイルをコンパイルして、ローカル開発を行っているかテストしているかに応じて、いずれかのタスクを実行できるようにしました。CSS をコンパイルする「less」タスク、「lrl」ライブ リロード監視タスク、「bs」ブラウザ同期監視タスクを作成しました。重複を削除するために「少ない」タスクを作成しましたが、css を変更すると、css を挿入するだけでなく、ブラウザがすべてをリロードします。

タスク内でタスクを呼び出す方法に少し混乱しています。css が挿入されていることを確認する方法はありますか?この方法で設計に取り組む方がはるかに高速です。

どうもありがとう

=================== 大きな編集 ===========================

私は実行シーケンスをいじっていますが、まだ同じ問題があります。何らかの方法でタスクが機能しています。デフォルトのタスクでは、ローカル サーバーでのみ live-reload を取得します。gulp serveブラウザとデバイス間でレイアウトをデバッグできるサーバーを取得します。問題は、CSS インジェクションを取得できなくなったことです。gulp がすべてのタスクを再実行し続け、ブラウザを更新して再接続しているようです。

だから私は、私が達成しようとしていることをより明確にするために、複製されたコードで動作するバージョンを作成しました

これを行うと、スムーズに動作します。しかし、「less-lrl」タスクと「less-bs」タスクからのコードの重複は避けたかったのです。唯一の違いは.pipe(livereload());、.pipe(reload({stream: true}))

私の脳内で愚かなことが起こっています、私は理解していません:)

Grunt のブラウザ同期プラグインを正しく動作させる際に、混乱する問題が発生しています。私はドキュメントを徹底的に読み、例に従いましたが、うまくいかないことがいくつかあります:
1) CSS インジェクションを受けていません。監視タスクと一緒にプラグインを実行していることはわかっていますが、watchTask: true設定したところ、ターミナルは bS が CSS の変更を識別していることを示しています。ブラウザをリロードしていないだけです。
2) ゴースト モードのオプションがどれも機能しないようです。それらをすべてtrueに設定しましたが、livereload機能と同じように機能させることができません。

これが私の現在のGruntfileです：

どんな助けでも本当に感謝します

gulp を実行した直後に、「BrowserSync から切断されました」というメッセージが表示されます。これが私のgulpfile.jsです

ときどき正常に動作しますが、30 秒を超えることはありません。CLI は、すべてがまだ正しく機能しているように動作します。エラーは表示されず、ファイルの変更が通知されます。

他の誰かがこの問題を抱えていますか?

gulp serve を実行すると、次のエラーが発生します。

これは、browser-sync を実行しているときにのみ表示されます。これが私の browser-sync 構成です。

次のバージョンを実行しています。

node: 0.10.33 gulp: 3.8.10 browser-sync: 1.8.2 (1.9.xも試しました)

開始パスは正しく、存在します。ghostMode を無効にしても役に立ちません。

ファイルassets/css/main.cssを取得し、RewriteRule を振りかけると、次のようになります。

問題は、BrowserSync が URL をファイルに「マップ」できなくなり、CSS インジェクションが失敗することです。ドキュメントをトロールしても何も明らかになりませんでした。誰かが同様の状況に遭遇したかどうか疑問に思いましたか? 典型的な一口セットアップ: