2018.01.13

ファイルの変更を監視して自動リロードするローカルWebサーバーの起動方法3選


自動リロードするローカルWebサーバーを起動する方法を3点まとめました。

自動リロードとは、、、 ファイルの更新を検知して自動的にブラウザをリロードしてくれる機能です。 コードを変更したあと自分でいちいちブラウザをリロードしなくて済むので、フロントエンド開発が少しだけ便利になります 🤗

いずれもエディタのプラグインやコマンドラインを利用する方法です。 そのため、GulpやWebpackの設定を行うよりも手軽に導入できるのではないでしょうか。

VS Code

Screenshot_LiveServer_VisualStudioMarketplace.png

Live Server というプラグインを使用します。

インストール

  1. まずは左のメニューのうち「拡張機能」タブ(一番下)をクリック
  2. 「Live Server」で検索してインストール(画像で一番上にヒットしているプラグインです)
  3. インストールが完了したら変更をエディタに適用するため、一度再起動してください。

ScreenShot

使い方

フッターの「Go Live」をクリックしてください。 http://127.0.0.1:5500 でブラウザが自動的に起動します。

ScreenShot

または、ファイルを右クリックして "Open with Live Server" をクリックしても起動できます。

ScreenShot

起動後は 🚫 マークをクリックすると終了します。

ScreenShot

Atom

ScreenShot

atom-live-server というプラグインを使用します。

インストール

Settings -> Install -> "atom-live-server"で検索 -> "Install" をクリック

ScreenShot

使い方

以下の表の通り、ショートカットでブラウザが起動します。 例えばctrl + alt (option) + 9ですと http://127.0.0.1:9000/ でブラウザが起動します。

ScreenShot

終了のためのショートカットはctrl + alt (option) + qです。

LiveReloadX

Screenshot

LiveReloadX というコマンドラインアプリケーションを使用する方法です。

インストール

Nodeおよびnpmはすでにインストールされているものとします。

Mac

$ sudo npm install -g livereloadx

Windows(コマンドプロンプトは管理者権限で開いてください。)

$ npm install --global --production windows-build-tools
$ npm install --global node-gyp
$ npm install -g livereloadx

使い方

下記のコマンドを実行してください。 オプション-p にはポートを指定してください(下記の例では9000番を指定しています)。

$ livereloadx -s -p 9000 path/to/public/folder

終了するときはターミナル(コマンドライン)上で ctrl + c キーを押します。


以上、自動リロードするローカルWebサーバーを起動する方法でした。