LiveStyle はリアルタイム CSS 編集ツールであり、(その機能は) LiveReload や CodeKit などの一般的なツールに似ています。これらの背後にある考え方ツールはシンプルです。エディターで CSS ファイルを編集して保存すると、ブラウザーのページ (編集後に保存されたスタイル ファイルのページを指します) が自動的に更新されることに驚くでしょう。 CSS スタイルの変更によって問題が発生した場合は、視覚的なフィードバックを提供します。
ほとんどのリアルタイム編集ツールのワークフローは次のとおりです。既知のフォルダー内のファイルの更新をリッスンし、追加の作業 (LESS を CSS に変換するなど) を実行し、最後に (ページを更新します)スタイルが変わります）。つまり、ソース ファイルを保存し、微妙な変更がページにどのような影響を与えるかを確認するために数秒待つ必要があります。
LiveStyle は、リアルタイムの編集エクスペリエンスを可能にします。テキスト エディターに入力すると、(LiveStyle) ファイルの保存やページのプリロードを待たずに、Web ページが即座に更新されます。 LiveStyle は、ブラウザ開発ツールバーの変更をソース コードに正しい方法で同期的に更新する最初のツールです
より良い編集 (ユーザーの) エクスペリエンスを追求するために、LiveStyle はブラウザやコードエディタに直接統合されています。したがって、最初に行う必要があるのは、ブラウザとエディタのプラグインをインストールすることです (現在、Google Chrome と Sublime Text のみがサポートされています)。
最も簡単な方法は、LiveStyle アプリを使用することです。
1. オペレーティング システムに対応した LiveStyle アプリをダウンロードします (Linux はまだサポートされていません。手動インストール方法を使用してください)。
2. 解凍して実行します。
Windows ユーザー: LiveStyle を初めて実行するとき、Windows がネットワークへのアクセスを要求する場合があります。要求を許可してください。プラグインやリモートビューをダウンロードする際は、インターネットに接続する必要があります。
すべてがうまくいけば、次のような LiveStyle アプリケーションのインターフェースが表示されます。
LiveStyle アプリケーションのインターフェースでは、必要なプラグインが表示されます。もちろん、Remote View セッションのリストも確認できます。インストールボタンをクリックすると、インストールプロセスが開始されます。
ブラウザとエディターにこのプラグインがインストールされている場合は、LiveStyle アプリケーションを閉じてかまいません。これは、LiveStyle アプリケーションが必要なのは Remote View だけであるためです。
LiveStyle アプリケーションのダウンロードと実行で問題が発生した場合は、手動インストールを試すことができます。
1. Chrome では、ブラウザのアドレス バーが LiveStyle WebStore ページにジャンプします。
2. 右上隅にある「Chrome に追加」ボタンをクリックします:正常にインストールされると、Chrome ツールバーに LiveStyle アイコンが表示されます:
Sublime Text プラグインをインストールする最も簡単な方法は、パッケージ コントロールを使用することです。これは、Sublime Text プラグインをインストールするより良い方法です。パッケージ コントロールはすべてのプラグインを管理します。 - インストール プロセスを実行し、自動的に更新します。
1. 説明にあるように、Package Control をインストールします (Package Control をまだインストールしていない場合)。
2. Sublime Text の [ツール] > [コマンド パレット...] メニュー バーをクリックします。
3. ポップアップ ダイアログ ボックスで「install package」と入力して「パッケージ コントロール: パッケージのインストール」メニュー バーを見つけ、矢印キーを使用して選択して Enter キーを押します。
4. Package Control が利用可能なパッケージのリストをロードするまで数秒待ちます。
5. ロードが完了すると、「livestyle」と入力して LiveStyle パッケージを見つけ、Enter キーを押します。
しばらくすると、LiveStyle プラグインが正常にインストールされます。Sublime Text を再起動して、すべてが適切に動作していることを確認することをお勧めします。
Package Control を使用できない、または使用したくない場合は、完全に手動でインストールしてみてください:
1. Sublime Text で、[設定] > [パッケージの参照...] メニュー バーを選択します。ファイルマネージャーが「パッケージ」フォルダーを開きます。
2. 開いたパッケージフォルダー内に新しい LiveStyle フォルダーを作成します。
3. プラグイン コードをダウンロードして解凍し、新しく作成した LiveStyle フォルダーにアーカイブします。
4. 最後に、ファイル ディレクトリ構造は次のようになります。
5. Sublime Text を再起動します。
利用可能な Atom プラグインはベータテスト状態であるため、手動でインストールする必要があります (LiveStyle アプリケーションはインストール ソースを提供しません) 。
1. Atom で、[設定] > [インストール] に移動します。
2. livestyle-atom プラグインを検索してインストールします。
または、apm 経由でインストールすることもできます: apm install livestyle-atom
ブラウザ プラグインとエディタ プラグインをインストールした後- 次々と LiveStyle を使い始めることができます。
LiveStyle のすべての設定は、Google Chrome 拡張機能を通じて制御されます:
LiveStyle ポップアップ ボックスには、現在のページで取得できるスタイル シートのリストが表示されます。各ブラウザのスタイル シートの場所 (現在のページが所有) の下に、すべてのスタイルを含むリストが表示されます。シート (エディタで開くことを指します) スタイル シート) ドロップダウン メニュー。 LiveStyle の使用を開始するには、現在のページで LiveStyle を使用可能にし、ブラウザのスタイル シートをエディタで開いたスタイル シートに関連付けるだけです。その後、エディターでスタイル シートに加えられた変更は、ブラウザーで指定されたスタイル シートに同期され、その逆も同様です。 場合によっては、ブラウザー開発ツールバーを使用したスタイル変更操作によってソース コードが破壊されないように、ブラウザーとエディター間のスタイルの更新や保存機能 (エディターからブラウザーへの更新など) を制限したい場合があります。上記の機能を実現するには、青いボタンをクリックして更新モードを順番に切り替えます。
エディタ ⇄ ブラウザは全二重スタイル シート更新が可能です
エディター → ブラウザーはエディターからブラウザーへのスタイル シート更新のみを実装でき、ブラウザー開発ツールバーを使用してスタイル シートを変更するすべての操作は無視されます
エディタ ← ブラウザは開発ツールバーからエディタへのスタイル シートのみを更新でき、エディタを介したスタイル シートへのすべての変更は無視されます
LiveStyle を簡単に楽しく使うために、まずはリアルタイム更新に必要なセッションを作成しましょう！
LiveStyle は、ファイルの保存やページのプリロードを行わずに、その場で CSS を更新します。これは、エディターからブラウザー、ブラウザーからエディターという双方向の CSS 更新を可能にする最初のツールです。
LiveStyle を実行するために特別なビルド ツールや Web サーバーは必要ありません。インターネット上のほぼすべての Web サイトがプレイグラウンドになります。
ハード ドライブ経由で開いた方法、FTP サーバー経由で直接開いた方法、または保存せずに作成した方法に関係なく、任意の CSS ファイルをライブ編集に使用できます。これらのファイルをテキスト エディタで開くと、その場で編集できます。 PS: 作成および保存しないファイルに対して CSS 構文ルールを設定することを忘れないでください。
LiveStyle はコード コラージュを使用します。Web サイトに合わせて小さな CSS モジュールを簡単に調整できます (結合および圧縮されたコード ブロックを使用)
LiveStyle では、双方向データ編集に LESS および SCSS (SASS 構文機能なし) を使用できます。 SCSS および LESS ファイルの使用方法は、CSS ファイルの使用方法と似ています。エディターで .less または .scss ファイルを開き、Google Chrome 拡張機能ダイアログ ボックス (ブラウザーに存在する) にリストされているファイル名と一致します。エディターのファイルでファイル名を使用して関連付けを作成します。ただし、最初にプリプロセッサのサポートについていくつかのことを学ぶ必要があります。
最も重要なことは次のとおりです。
LiveStyle は、独自に実装された LESS および SCSS プリプロセッサを使用します。
このプリプロセッサは厳密に単体テストされていますが、不十分な使用法や機能ポイントの欠落がある可能性があります。プリプロセッサがうまく動作しないことに気付いた場合は、お気軽にバグを報告してください。
プリプロセッサ スタイル シートをリアルタイムで編集する必要があると、LiveStyle は自動的に解析し、@import を使用してファイルを導入します。元のプリプロセッサとは異なります。 CSS コンテンツは現在のスタイルシートに追加されますが、変数とミックスインの値として追加されます。これは物議を醸すトピックであり、将来変更される可能性がありますが、現時点では、@import を含む CSS ファイルの場合、@import によって導入されたコンテンツはパフォーマンスを低下させるリスクをもたらします。
多くの開発者は、あらゆるシナリオでコード ライブラリを使用することを好み、コード ライブラリが現在のプロジェクト内のすべての個別のスタイルシートで利用できると想定しています。たとえば、Twitter Bootstrap には variables.less ファイルがあり、bootstrap.less ファイルには variables.less ファイルが含まれています。したがって、buttons.less のようなモジュールは、データが variables.less から取得されると単純に想定できます。Variables.less は、コンパイル時にのみ取得できます。buttons.less モジュールは、純粋な @import variables.less コンテンツではありません。
LiveStyle がいくつかの想定されるモジュールやその他のグローバル モジュールをよりよく理解できるようにするには、現在のプロジェクトに固有のグローバル依存関係を追加する必要があります。また、グローバル配列をプロジェクト ファイル (Sublime Text3 を使用して開いた) のライブスタイル領域に追加するだけで済みます。
{ ... "livestyle": { "globals": ["./less/variables.less", "/path/to/global/mixins.less"] } }そこから後で、現在のプロジェクトのスタイルシートを編集するたびに、グローバル セクションに含まれるファイルのリストが変数とミックスインの解決に使用されます。
LiveStyle は、ブラウザからのスタイル変更をプリプロセッサ スタイル シートに適用するためにセーフ パッチワーク モードを使用します。
次の LESS スタイルシートがあるとします。
@a: 100px; @b: 50px; div { width: @a; }次のビュー サーバーにコンパイルします。 -side stylesheet:
div { width: 100px; }ここで、開発者ツールバーで width 属性値を 50px に設定すると、元の LESS スタイルシートが更新されますか?可能な値は次のとおりです:
width:50px; - 静的な値を導入するだけで元の式をオーバーライドすると、表示されているスタイルが壊れてしまう可能性もあります。認識されにくいエラー。
@a: 50px; ——幅属性値を生成する変数値をオーバーライドすると、ほとんどのシナリオでコードが破損する可能性があります。
width: @b; ——他の変数を使用します (変数解析の結果は導入する必要がある値と同じです)。将来エラーが発生しますwidth: @a / 2; —— おそらく元の変数の半分が必要ですか？
width: @a - @b ——それともこれ？
他にも便利な組み合わせがあります。
LiveStyle は、セキュリティ更新プログラムに適用できるように、いくつかのシナリオで柔軟に対応しようとします。つまり、現在の値と元の値の間の差異を追加または削除します。この場合、LESS ファイルを幅:@a - 50 で更新します。それでも @a 変数参照を保存できます (スタイルシート作成者は、変数値を変更することで一部の属性の属性値を更新できます)。将来のスタイル シートの更新と、その更新に必要なスタイル シートを見つけるのは非常に簡単です。安全なパッチワーク モードは、色だけでなく数値にも使用されます。
安全なパッチワーク モードは、ミックスインを通じてプロパティを更新します。たとえば、次の SCSS コードがあるとします。
@mixin foo { width: 100px; }.bar { @include foo;color: red; }
次に、.bar ルールで width: 50px を設定します。開発者ツールバー ; LiveStyle は次の結果を生成します:@mixin foo { width: 100px;} .bar { @include foo;color: red;width: 50px;}
LiveStyle は width 属性を非常によく追跡し、@mixin foo ソースの属性を変更するまで検索できます。 mixin は、依存関係のルールと foo mixin の違反につながり、この状況に気付かない可能性があるため、安全ではないと考えられています。
プロジェクトの開発中に、以前はこの状況 (ローカル Web サイトが単純な Web サーバーまたはその他の方法で実行される) が発生する可能性があります。他のデバイス (実際には携帯電話) で Web サイトをテストしたい場合、上記の方法は非常にうまく機能します。コンピュータと携帯電話が同じ LAN 内にある場合、上記の問題は問題になりません。また、何をする必要があるかコンピュータの LAN IP (http://10.0.1.2:8080 など) を使用して、携帯電話でローカル Web サイトをプレビューすることです。
BrowserStack のようなサービスをさまざまなデバイスでテストするために使用したい場合、または自分の作業を同僚や顧客と共有したい場合はどうすればよいですか?この場合、プロジェクトのコピーを作成し、それを外部サーバーに置く必要があります。これは高速ではなく、困難です (特に Web サイトでサーバー側のロジック制御が必要な場合)
LiveStyle を使用すると、よりシンプルで優れたソリューションが得られます。リモートビューを試すことができます。
Remote View は、ローカル Web サーバーを指すドメイン名を生成します (外部ネットワーク上のユーザーがアクセスできます)。この URL を同僚や顧客と共有してください。上記の URL と BrowserStack などのサービスを使用して、実際のデバイスでプロジェクトをテストします。さらに、リモートビューを使用すると、LiveStyle が上記の URL に合わせて自動的に更新されます。 DevTools とコード エディターを使用してスタイルを微調整し、複数のデバイス間で即座に更新されるのを確認します。
このチュートリアルでは、LiveStyle の使用チュートリアル
のデモ ページとスタイルの例を使用します。リモートビュー機能を使用するには、LiveStyle アプリを実行する必要があります。
初めて使用するときは、次の操作を行う必要があります。権限を要求する 認証を行うには、認証される Google アカウントが必要です。
ご覧のとおり、実際のデバイスで Web ページのスタイルを微調整するのは非常に簡単です。プレッシャーはありません。ユーザーや同僚とリアルタイムの共同セッションを作成できます。リモート ビュー URL を共有し、スタイルをリアルタイムで更新できます。
ベータテスト期間中は、有料のリモートビューサービスが完全無料となります。
LiveStyle は実験的で非常に詳細なソフトウェアであり、常識に従ってカードをプレイせずに動作しない場合があります。このガイドは、問題の根本を見つけるのに役立ちます。
双方向のリアルタイム編集エクスペリエンスを向上させるために、LiveStyle はソース コードのパッチワークを実行します。LiveStyle はスタイルをオブジェクト モデルに解析し、更新されたデータに反応します。これは、CSS/LESS/SCSS に文法上のエラーがあってはいけないことを意味します。 LiveStyle は単純なエラーから回復しようとしますが、失敗する場合もあります。
スタイル ファイルをまったく解析できない場合、またはライブ アップデート中に致命的なエラーが発生した場合は、しばらくすると Google Chrome の LiveStyle アイコンが赤色に更新されます。
このアイコンをクリックすると、拡張機能のポップアップ ボックスにエラー メッセージが表示されます。もちろん、[エラー ログの表示] リンクはポップアップ ボックスに長時間表示されるため、クリックしても問題ありません。エラーの原因を確認するためのリンク:
ローカル Web ページを開発している場合 (file:// プロトコル経由で Web ページを開くなど)、 Google Chromeにはいくつかの制限が適用される場合があります。
http:// プロトコルを使用して Web ページにアクセスすることを強くお勧めします。既知のフォルダーにローカル HTTP サーバーを起動するための無料で簡単なツールが多数あります (近日公開予定)。 LiveStyle には将来的にいくつかのオプションが追加される予定です）。 file:// プロトコル経由で Web ページを開くと、Google Chrome によっていくつかの制限が適用され (LiveStyle はさまざまなハッキングを通じてこれらの制限を克服しようとします)、その結果、パフォーマンスの低下やページ更新エラーが発生する可能性があります。
それでもローカル HTTP サーバーを使用したくない場合は、開発者ツールで現在のページを開き、ライブ編集セッション中は現在のページを開いたままにしてください。
LiveStyle ポップアップ ボックスを開いてスタイル シートが表示されないが、現在のページにすでに追加のスタイルが含まれている場合は、次の方法を試すことができます:
タブを閉じて、再度開きます。拡張機能の自動更新後に同様のエラーが表示される場合があります。
Chrome 拡張機能は、Websocket プロトコル経由でエディターへの接続を確立します。 「接続なし」エラーが発生する場合は、次の問題が原因である可能性があります:
Sublime Text が実行されていないか、Sublime Text の LiveStyle 拡張機能がインストールされていません。
テキスト エディターには LiveStyle 拡張機能の最新バージョンがインストールされていません。 Package Control を通じて Sublime Text 拡張機能をインストールした場合は、エディターを再起動するだけで拡張機能が自動的に更新されます。
現在のネットワーク設定/プロキシ/ファイアウォールは、Websocket サーバーが実行されているアドレスである http://127.0.0.1:54000 へのネットワーク接続をブロックしています。この問題の解決策については、システム管理者に問い合わせてください。
「接続なし」問題のもう 1 つの理由は、Sublime Text Web サーバーの実装が壊れていることです。 [表示] > [Sublime Text でコンソールを表示] エラー ログを確認します。この場合、[LiveStyle アプリ](http://livestyle.io/#download) を開いて Sublime Text を再起動できます。LiveStyle アプリには独自のサーバー実装があるため、Sublime Text が開始されると、Dead の代わりに新しい接続が作成されます。繋がり。
スタイル ファイルが有効でエラー メッセージは表示されないが、LiveStyle が依然として適切に動作しない場合は、内部デバッグ ログを確認して詳細情報を取得できます。デバッグ ログを取得します:
Emmet LiveStyle 拡張機能の「背景画像」をクリックします。
開発者ツール ウィンドウが開き、「コンソール」ペインにジャンプしてデバッグ ログを表示します。 , エラーの原因となった手がかりをできるだけ見つけてください。
LiveStyle の使用中にエラーを見つけた場合、または LiveStyle に改善が必要だと思われる場合は、質問/提案を送信できます。問題を送信する前に、以下のいくつかのルールに従ってください:
送信された問題を見てください。すでに同じ問題を送信している人もいて、解決策についてここで議論されています。
問題、期待される結果、およびエラーの原因についてできるだけ詳しく説明してください。 「LiveStyle は無効です!!!!」などのテンプレートを送信しても効果はありません。
考えられるすべてのエラーのデバッグ ログ (テキスト ログやスクリーンショットなど) を追加してください。
可能であれば、エラーの原因となったスタイル コードのスニペットを添付してください。
エラーを説明するスクリーンショットと短いビデオ/アニメーションが添付されているため、より役立つ可能性があります。
QR コードをスキャンして w3ctech WeChat 公式アカウントをフォローしてください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
