ページの自動更新を実現する Grunt プラグイン LiveReload の詳細説明 (2 つのオプション)、gruntlivereload_PHP チュートリアル

自動ページ更新を実現する Grunt プラグイン LiveReload の詳細な説明 (2 つのオプション)、gruntlivereload

オプション 1: grunt-livereload + Chrome プラグイン

利点: インストールと構成はシンプルで便利です。
短所: 指定されたブラウザ プラグインと連携する必要があります (Firefox にも関連プラグインがあります、ご存知のとおり、IE)。

1. 2 つのコネクタをインストールする必要があります: grunt-contrib-watch、connect-livereload

コマンドを実行:

コードをコピーしますコードは次のとおりです:
npm install --save-dev grunt-contrib-watch connect-livereload

2. ブラウザプラグインをインストールします: Chrome LiveReload

3. Web サーバー (IIS/Apache) を構成します。LiveReload はローカル サーバー環境で実行する必要があります (file:///ファイル パスのサポートはあまり良くありません)。

4. Gruntfile.js ファイルを変更します:

リーリー

5. 実行: うなり声ライブ

監視タスクが開始されたことを示す次のプロンプトを確認してください:

コードをコピーしますコードは次のとおりです:
「監視」タスクを実行中
待っています...

6. たとえば、次のページを開きます:http://localhost/

7. Chrome LiveReload プラグインのアイコンを再度クリックすると、アイコンの円の中心にある小さな点が点灯し、プラグインが正常に実行されたことを示します。この時点で、ウェブサイトのファイルを変更して、リアルタイムで更新されるかどうかを確認できますか?

オプション 2: grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

利点: 静的ファイル サーバーを自動的に構築するため、自分のコンピューターに Web サーバーを構築する必要はありません。
ブラウザ プラグインのサポートは必要ありません (特定のブラウザに限定されません)。
livereload.js を Web ページに手動で追加する必要はありません。
短所: 初めての方にとっては、設定が少し複雑です。

1. 必要な 3 つのプラグインをインストールします: grunt-contrib-watch、grunt-contrib-connect、connect-livereload

コマンドを実行:

コードをコピーしますコードは次のとおりです:
npm install --save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload

2. Gruntfile.js ファイルを変更します:

リーリー

5. 実行: うなり声ライブ

Web サーバーがセットアップされ、監視タスクが開始されたことを示す次のプロンプトを参照してください:
コードをコピーしますコードは次のとおりです:
「connect:livereload」（接続）タスクを実行中
127.0.0.1:8000 で Web サーバーへの接続を開始しました。

「監視」タスクを実行中
待っています...

注: LiveReload ブラウザ プラグインをインストールしている場合は、このコマンドを実行する前にそれを閉じる必要があります。

6. ページを開きます。例:http://localhost:8000/またはhttp://127.0.0.1:8000/
注: ここで開かれるローカル サーバー アドレスは、IIS または Apache を使用して独自に構築するために使用した Web サーバー アドレスではなく、接続を通じて構築したばかりの静的ファイル サーバー アドレスです。

上記は、ページの自動更新 (2 つのオプション) を実現するための Grunt プラグインの LiveReload についてのこの記事の詳細な説明です。