問題タブ [gulp-livereload]

リモートサーバーでlivereload、 、およびその他でgulp を使用しています。less私はこれまで何度も gulp を使用して成功してきましたが、このシナリオを経験したことはありません。

WinSCPを使用してファイルを保存/編集しています（ファイルをダブルクリックすると、Sublime Textで開きます...保存すると、WinSCPは自動的にサーバーにアップロードします）。

ただし、この方法で実行すると、gulp-lessほとんどの場合失敗します。コンパイルされたコア CSS ファイルが 2 つあります。

失敗すると言うとき、これが私が意味することです-Bootstrapを使用すると、常に同じエラーが発生します。

@grid-columnsこれは、メインの Bootstrap「インポート」ファイルで最初の見出しとして定義した場合でも発生します。

もう 1 つはlivereload、Less ファイルがコンパイルされる前のある時点で、コンパイルされた CSS をリロードするという点で失敗します。これは不可能なはずですが、どういうわけか起こります。

ただし、SSH コマンド プロンプトからtouch myfile.lessorと入力するtouch anybootstrapfile.lessと、すべてが完全に機能します。

明らかにこれは非常に迷惑ですが、住みやすいです。なんらかの修正方法が必要だと思いますが。世界でこれを実現できるものと、それを修正するために何ができるか (もしあれば) についてのアイデアはありますか?

私のgulp watchタスクは次のように構成されています：

1 つのことを除いて、すべてが簡単に機能します。svg スタイルを更新するときは、livereload (gulp-connect プラグインを使用します) では機能しませんが、手動でリロードすると機能します... .jade ファイルは svg スタイルを更新するため、この小さな回避策は次のとおりです。

これは、svg が埋め込まれている object タグと関係があると思われますが、確かではありません。また、css スタイルは、このリンクを使用して svg 自体にハードコードされています。

ちょっとしたハックで動作させることはできますが、なぜこれがすべて起こるのかについてはあまり啓発的ではありません...

これを私に説明できる人に事前に感謝します。

livereload で gulp を動作させようとしています。Gulp は Web サーバー自体を制御していません (実際の Web アプリは php サイトです。サーバーで nmap を実行すると、livereload が機能していないことがわかり、chrome 拡張機能も同じことを示しています。

これが私の一気飲みの仕事です：

これらの便利で人気のあるプラグインで gulp を使用する方法を理解しようとしています。私が持っているものがあります：

• localhost:8000で go(lang) サーバーを実行しました
• サーバーがページを形成するために使用するappフォルダーの下の静的/ローカル html ファイル
• css に変換され、自動接頭辞が付けられる、同じディレクトリの下の scss ファイル

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

だから私が必要なもの：

• html、css/scss ファイルの変更を監視し、localhost:8000 (chrome の開いているタブ)でリロードします。
• 使用する必要がない場合は素晴らしいでしょう：
  • livereload chrome プラグイン
  • expressjs フレームワーク
• サーバーなしでファイルのように直接開いた場合、htmlページをリロードします

gulp-embedlrとgulp -webserverを使用してこれを実現できることを読みました。もしそうなら、それを行う方法は？

gulp-livereload私は自分のnodejsサーバーで作業しようとしています。gulp-nodemonファイルの変更後にサーバーを再起動するために使用していますが、これは機能します。livereload.reload()正しいタイミングで呼び出すことができません。

現在、(nodemon がスクリプトを開始するたびに)を呼び出しlivereload.reload()ています。これは機能しますが、数秒かかります。その理由は、nodemon が、スクリプトが呼び出される前に呼び出す nodejs スクリプトの実行を開始するためです。そのため、サーバーの準備ができていない状態でブラウザーが更新されます。.on('start'...gulpfile.jslivereload.listen() app.listen(port)

app.listen(port)特定のポートが使用されているかどうかを確認するために、nodejs nodemon スクリプトが呼び出されたか、またはリッスンしたかどうかをリッスンする方法はありますか?

私は小さな睡眠の問題を修正しましたが、それはとても間違っていて汚いと感じています.

ここから取得してこれに変更した gulp ファイルがあります。

「gulp」を実行するとすべてが機能しますが、Apache ホストに移動すると、ライブ リロードが機能しなくなります。

私はライブ リロードに慣れていないので、解決策を教えてください。

ライブ リロード プラグインをインストールしてオンにしましたが、まだ機能していません。

私はホストとのステップを逃していますか?

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}))

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