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

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

WBOY

リリース： 2016-07-13 09:45:16

オリジナル

870 人が閲覧しました

自動ページ更新を実現する 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 についてのこの記事の詳細な説明です。