browser-syncの設定でハマった

Browsersync Command Line Usage

タスクランナーをpackage.jsonのみで

毎度、WordPressのテーマを作成する際に便利に使ってたんですが、今回、スタティックなhtmlをコーディングすることになり、いつも通りbrowser-syncを使ってサクサクやってしまおうとして、ハマりました 😅

Cannot GET xxxx 😵

例えば、今回は

Dirctory
   ├── index.html
   ├── A
   │   └── style.css
   └── B
    ├── front-page.html
    ├── home.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    └── single.html

のような構成で、ディレクトリBにpackage.jsonがあるが、ディレクトリAのstyle.cssも読み込ませて作業を進めたかったんですよね。

この場合、ディレクトリBで、npm start してしまうと、ディレクトリAのstyle.cssは読み込まれなくて、思った作業ができなかったんです。
browser-syncは動いてるけど、localhost:3000/home.htmlへアクセスすると、Cannot GET /home.html となってしまう。。

–server オプション

–server, -s Run a Local server (uses your cwd as the web root)

Browsersync Command Line Usage

これを使えば、package.jsonのないディレクトリ（今回は親ディレクトリ）を設定できるっぽい。

[code]
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "browser-sync start --server '../' --files '**/*'"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.23.2"
  }
}
[/code]

こんな感じ。
これだと、ばっちりリロードしてくれた 😀

普段は、WordPressのテーマ構築で使ってて–proxyオプション使ってるから気づかなかった 😅

これでサクッとhtml作って確認みたいな作業も楽になるかも。