Ystk(ヨシタカ)が気になったWeb制作に関する情報をメモするためのブログです。

Node.js

BrowsersyncのCLIでブラウザがリロードされない問題を解決

投稿日:2017年10月23日 更新日:

BrowsersyncをCLI(コマンドライン)で実行した際、–filesオプションで指定したファイルを変更してもブラウザがリロードされなかった理由が、やっと分かったので解決方法を共有します。
ただし、これはnpm-scriptsで実行することを想定しています。

ファイル変更してもリロードされない

  "scripts": {
    "browser-sync": "browser-sync start --server public/ --files 'public/**/*'"
  },

このような形で、Browsersyncのオプションを指定していました。オプションの内容としましては、下記のようになっています。

  • ルートディレクトリを「public」としてブラウザを起動する。
  • 「public」ディレクトリ内のファイルが変更されたらブラウザをリロードする。

しかしこの形式でコマンドを実行して、ファイルを変更してもブラウザがリロードされませんでした。

npm run browser-sync

...(略)

[Browsersync] Serving files from: public/
[Browsersync] Watching files...

解決方法

色んな書き方を試したりして、やっと以下のように解決方法を見つけました。

  "scripts": {
    "browser-sync": "browser-sync start --server public/ --files \"public/**/*\""
  },

「’(シングルクォーテーション)」「”(ダブルクオーテーション)」に変えてあげるだけです。
ただし、「\(バックスラッシュ)」でエスケープする必要があるので注意です。

分かったら「何だそれだけか」って感じですが、まさかそれだけで動かないとは思ってもみなかった。
むしろ公式のドキュメントにあるExampleがシングルクォーテーションだから、それに騙された感じです。

もし、Browsersync CLIのファイル変更で、ブラウザがリロードされない方がいましたら確認してみてください!

-Node.js
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

LinuxでNode.jsのバージョンを管理する

今回はLinuxでNode.jsのバージョン管理する方法を紹介します。 通常、Node.jsのバージョンを変えたい場合は、一度入れ直さないといけませんが、nvm(Node Version Manage …

no image

WindowsでNode.jsのバージョンを管理する

LinuxでNode.jsを管理する方法を以前記事にしましたが、今回はWindowsでのNode.jsを管理する方法を紹介します。 LinuxでNode.jsのバージョンを管理する nodistのイン …

no image

Electronをバージョン指定してインストールするときの注意点

現在、仕事でElectronを使った開発を行っていて、Electronのバージョンを統一する必要があったため、v1.7.9(2017/12/14時点で最新)からv1.2.5にダウングレードしました。 …

no image

「npm WARN enoent ENOENT: no such file or directory」の解決方法

「npm install」や「npm update」をすると、「npm WARN enoent ENOENT」の警告がやたら表示されるようになったので、今回はこれについての簡単な解決方法を説明します。 …