ブログ

読んで思い出す。忘れるために書く

トップ > Q&A > Q. Parcel + Livereload でブラウザの再読込を自動化したい

Q. Parcel + Livereload でブラウザの再読込を自動化したい

Q&A Node.js

A. npm-scripts にスクリプトを定義する

(Parcel そのものは本記事とは関係ない (parsel serve [dir_and_file_name] で自動更新できる))

セットアップ

大まかな手順は次の通り:

  1. ブラウザに LiveReload の拡張機能をインストール
  2. LiveReload を Node.js 側に追加
  3. スクリプトを定義
  4. 定義したスクリプトの実行

NOTE: ブラウザの拡張機能についてはここでは説明しない

Liverelaod の追加

GitHub リポジトリのREADME.md にある通り、インストールする

# ここでは yarn を使用する
yarn add -D livereload # devDependencies に追加

スクリプトの定義・実行

たとえば次のように scripts を package.json に追記する:

{
  "dependencies": {
    ...
  },
  "scripts": {
    "dev": "yarn run dev:parcel & yarn run dev:livereload",
    "dev:parcel": "parcel ./src/*",
    "dev:livereload": "livereload ./src -w 1000"
  },
  ...
}

ターミナルでコマンドを実行すれば、あとはブラウザ側で開発用サーバにアクセスしたとき LiveReload を有効化できるはず

yarn run dev

Links