BrowserSyncでAliasっぽい設定

どうもfujiharaです。ジメジメして生活しづらい季節ですね。本日はBrowserSyncでAliasを使いたいと思い調べていたら、似たように 使用できる方法があったのでご紹介いたします。（知らなかった。。。）

背景

弊社ではシステム開発する際にコーディングリポジトリとシステムリポジトリを分けることがあるのですが、 コーディングのCSS,JS,IMGをシステムリポジトリに反映するのが結構手間で、以前ブログに書きました gulp-directory-syncを使い、同じリポジトリで開発できるようしていました。 しかしこの方法だとファイルが2重管理になるので嬉しくありませんでした。

でAliasの設定ってないのかな（あるだろう）と思い調べていたら、 なかったのですがオプションでMultiple base directoriesというものがありました。 これを使えばdirectory-syncを使わずに効率良くできます。

例

以下のようになっているとします。本来srcにある各種ファイルをgulp, webpackなどでコーディング確認用のhtdocs/assetsに書き出していたのを、 フレームワーク用のfw_webroot/assetsに書き出します。 さらにbrowser-syncでデザイン確認時にはhtdocs/assetsが参照できるようにします。

[~/Downloads/bashalog]$ tree -I node_modules
.
├── bs-config.js
├── fw_webroot (システム用webroot)
│   └── assets (システム用assets)
│       ├── css
│       │   └── style.css
│       ├── img
│       └── js
│           └── index.js
├── htdocs
│   ├── assets (<---ここをAliasにしたい)
│   └── index.html
├── package.json
├── src (各種ソースファイル)
└── yarn.lock

BrowserSync設定(serverオプション部分のみ)

server: {
    baseDir: "htdocs",
    index: "index.htm"
}

↓

server: {
    baseDir: ["htdocs", "fw_webroot"],
    index: "index.htm"
}

まとめ

たったこれだけでhtdocs/assetsがなくてもfw_webrootもBaseDirectoryになるのでファイルを参照できるようになります。オプションはちゃんと見ましょう（自戒）。 ぜひお試しください