自動リロードするローカルWebサーバーを起動する方法を3点まとめました。
自動リロードとは、、、
ファイルの更新を検知して自動的にブラウザをリロードしてくれる機能です。
コードを変更したあと自分でいちいちブラウザをリロードしなくて済むので、フロントエンド開発が少しだけ便利になります
いずれもエディタのプラグインやコマンドラインを利用する方法です。
そのため、GulpやWebpackの設定を行うよりも手軽に導入できるのではないでしょうか。
VS Code
Live Server というプラグインを使用します。
インストール
- まずは左のメニューのうち「拡張機能」タブ(一番下)をクリック
- 「Live Server」で検索してインストール(画像で一番上にヒットしているプラグインです)
- インストールが完了したら変更をエディタに適用するため、一度再起動してください。
使い方
フッターの「Go Live」をクリックしてください。
http://127.0.0.1:5500 でブラウザが自動的に起動します。
または、ファイルを右クリックして "Open with Live Server" をクリックしても起動できます。
起動後は マークをクリックすると終了します。
Atom
atom-live-server というプラグインを使用します。
インストール
Settings -> Install -> "atom-live-server"で検索 -> "Install" をクリック
使い方
以下の表の通り、ショートカットでブラウザが起動します。
例えばctrl + alt (option) + 9
ですと http://127.0.0.1:9000/ でブラウザが起動します。
終了のためのショートカットはctrl + alt (option) + q
です。
LiveReloadX
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サーバーを起動する方法でした。