Web開発を行っていると、コードの変更を行った後にブラウザを手動でリロードする必要があります。
そこで、今回はそのような手動でのリロード作業を自動化してくれるBrowserSyncというツールの使い方を紹介します。
BrowserSyncを使えるようになると、自動ブラウザ以外にも以下のようなメリットがあり、現在のWeb制作には必須とも言えるスキルとなっています。
- ファイルを保存するとリアルタイムでブラウザを自動更新してくれるので、リロードボタンを押す手間を減らせる
- ローカルサーバーを立ち上げられる(絶対パスなどのブラウザに依存した開発が行える)
- サーバーにファイルをアップせずに、スマートフォンで表示を確認できる
- サーバーにファイルをアップせずに、同じネットワーク上で異なるデバイス間で表示を共有できる
なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。
INDEX
BrowserSyncとは
BrowserSyncはローカルサーバーを立ち上げ、ブラウザをリロードすることなく、コードの変更をリアルタイムに反映させることができます。つまり開発者はコードを編集すると同時にブラウザでその変更を即座に確認することができます。
さらに、BrowserSyncは同じネットワーク上の複数のブラウザやデバイスで閲覧を同期させるため、テストサーバーにファイルをアップロードさせる必要なく、実機のスマホで表示を確認することができるため、自動リロード以外にも大きなメリットがあります。
それではBrowserSyncをインストールして実際に使って見ましょう。
プロジェクトの準備
プロジェクトフォルダを作成
それでは早速使い方の説明です。
今回のサンプルは以下のディレクトリとファイルを進めていきますので、それぞれ適当なファイルの準備してください。
htdocs
└assets/
└images/
└img.jpg
└css/
└style.css
└js/
└main.js
└index.html
プロジェクトフォルダを作成したら以下のコマンドでpackage.json
を作成します。
npm init -y
パッケージのインストール
以下のコマンドで今回利用するbrowser-sync
のパッケージをインストールします。
npm i -D browser-sync
package.json
のdevDependencies
に以下のようにインストールしたパッケージが記載されたら成功です。
{
"devDependencies": {
"browser-sync": "^3.0.2"
}
}
BrowserSyncでは詳細な設定をpackage.json
のscripts
セクションに記述する方法と、BrowserSyncの設定ファイル(bs-config.js
)を用意してそこに記述する二つのやり方がありますので、それぞれ解説してきます。
それではコードを追加し、動作を確認していきましょう。
npmパッケージにおける設定ファイルとは、そのパッケージの動作や挙動を制御するためのファイルです。通常はパッケージのプロジェクトのルートディレクトリに配置して使用します。
設定ファイルを使用することで、パッケージの動作をカスタマイズし、プロジェクトの要件に合わせて調整することができます。
設定ファイル(bs-config.js
)を使用するやり方
設定ファイルの作成
以下のコマンドでBrowserSyncの設定ファイルのbs-config.js
ファイルを作成します。pacakage.json
を同じディレクトリにbs-config.js
ファイルが作成されていることを確認してください。
npx browser-sync init
init
コマンドとは設定ファイルの初期化コマンドです。コマンドを実行すると対象の設定ファイルがカレントディレクトリに作成されます。
記載されているコードは全て初期値が入っています。
また、ファイルの中身を書き換えた状態で再度init
コマンドを実行すると中身が初期化されてしまう為、注意が必要です。
生成されたbs-config.js
には以下のようなたくさんのコードが記載されおり、全てBrowserSyncのオプションの初期値の設定になっています。BrowserSyncではこのオプションを変更することでそれぞれのプロジェクトに合わせたカスタマイズを行うことができるようになります。
なお以下の設定ファイル内の記述を削除してもBrowserSyncの初期値の設定は変更されないため、基本的には設定を変更する箇所のみ変更して、変更しない部分は削除してしまっても問題ありません。
今回はWeb制作を行う上で必要となるオプションをメインに紹介していきます。
/*
|--------------------------------------------------------------------------
| Browser-sync config file
|--------------------------------------------------------------------------
|
| For up-to-date information about the options:
| http://www.browsersync.io/docs/options/
|
| There are more options than you see here, these are just the ones that are
| set internally. See the website for more info.
|
|
*/
module.exports = {
"ui": {
"port": 3001
},
"files": false,
"watchEvents": [
"change"
],
"watch": false,
"ignore": [],
"single": false,
"watchOptions": {
"ignoreInitial": true
},
"server": false,
"proxy": false,
"port": 3000,
"middleware": false,
"serveStatic": [],
"ghostMode": {
"clicks": true,
"scroll": true,
"location": true,
"forms": {
"submit": true,
"inputs": true,
"toggles": true
}
},
"logLevel": "info",
"logPrefix": "Browsersync",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
"rewriteRules": [],
"open": "local",
"browser": "default",
"cors": false,
"xip": false,
"hostnameSuffix": false,
"reloadOnRestart": false,
"notify": true,
"scrollProportionally": true,
"scrollThrottle": 0,
"scrollRestoreTechnique": "window.name",
"scrollElements": [],
"scrollElementMapping": [],
"reloadDelay": 0,
"reloadDebounce": 500,
"reloadThrottle": 0,
"plugins": [],
"injectChanges": true,
"startPath": null,
"minify": true,
"host": null,
"localOnly": false,
"codeSync": true,
"timestamps": true,
"clientEvents": [
"scroll",
"scroll:element",
"input:text",
"input:toggles",
"form:submit",
"form:reset",
"click"
],
"socket": {
"socketIoOptions": {
"log": false
},
"socketIoClientConfig": {
"reconnectionAttempts": 50
},
"path": "/browser-sync/socket.io",
"clientPath": "/browser-sync",
"namespace": "/browser-sync",
"clients": {
"heartbeatTimeout": 5000
}
},
"tagNames": {
"less": "link",
"scss": "link",
"css": "link",
"jpg": "img",
"jpeg": "img",
"png": "img",
"svg": "img",
"gif": "img",
"js": "script"
},
"injectNotification": false
};
Webサイトのルートディレクトリを指定
"server"
セクションがルートディレクトリの指定場所です。初期値はfalse
になっているので必ず設定を変える必要があります。
設定方法はプロジェクト直下のカレントディレクトリをルートディレクトリに設定する方法と、フォルダを指定する方法の2パターンあります。
module.exports = {
// 初期値
"server": false,
// プロジェクト直下
"server": true,
// フォルダ指定
"server": "dist",
};
監視対象ファイルの設定
監視対象ファイルは"files"
エリアで設定します。こちらも初期値はfalse
になっているので必ず指定します。
設定方法はファイル指定と拡張子指定・フォルダ指定の方法があります。
監視対象は複数設定することが可能です。その場合は,
で繋げて記載します。
module.exports = {
// 初期値
"files": false,
// ファイル指定(1ファイル)
"index.html",
// 拡張子指定
"assets/**/*.css",
"assets/**/*.js",
// 複数の拡張子指定
"assets/**/*.{css,js}",
// フォルダ指定
"assets",
};
プロキシ設定(外部のローカルサーバーを自動リロードする方法)
BrowserSyncでは外部のローカルサーバーを自動リロードする対象に設定することが可能です。
具体的には、WordPressのローカル環境構築に用いられるlocalや、phpファイルの実装でローカルサーバーの立ち上げるアプリなどを設定することができます。
それらのツールを使って作成されたローカルサーバーは"proxy"
セクションに登録することで、外部のアプリケーションをそのまま利用して、BrowserSyncと同期することができます。
設定方法は以下のようにローカルサーバーを指定するだけです。
module.exports = {
// 初期値
"proxy": false,
// ローカルホストの場合
"proxy": "http://localhost:80"
// local(wordpress)の場合
"proxy": "fukulog.local"
};
コマンド実行後にブラウザを自動的で開く
BrowserSyncでは初期設定でBrowserSync実行後にブラウザが自動で開くようになっています。
自動で開きたくない場合はfalse
を設定します。
module.exports = {
// 初期値
"open": "local",
// ブラウザを自動で開かない
"open": false,
};
ローカルサーバーのポート番号を指定する
BrowserSyncでは初期設定でローカルサーバーのポート番号が3000になっています。
ポート番号の指定を変更したい場合は"port"
の引数を変更します。
module.exports = {
// 初期値
"port": 3000,
// ポート番号を4000に変更
"port": 4000,
};
BrowserSyncを実行
以上5つがWeb制作で頻繁に利用されるオプションです。
実際に今回紹介したオプションでは以下のような設定になります。
module.exports = {
// 監視対象のファイル
"files": [
"assets",
"index.html",
],
// プロジェクトのカレントディレクトリをルートディレクトリに設定
"server": true,
// プロキシを使用しない
"proxy": false,
// ポート番号を4000に設定
"port": 4000,
// コマンド実行後にブラウザを自動で開かない
"open": "local",
};
さらにpackage.json
のscripts
セクションに以下を追加してnpm run browser
を実行しましょう。(npm-scriptsで今回作成したbs-config.js
へのパスを指定しています)
{
"scripts": {
"browser": "browser-sync start --config bs-config.js"
},
}
ブラウザが自動で立ち上がり、対象ファイルを変更して保存したらブラウザも自動でリロードされたら成功です。
その他の詳しい設定ファイルの指定方法は以下の公式サイトから確認できます。
package.jsonに設定を指定する方法
次に先ほどのbs-config.js
で設定した内容をpackage.json
で設定する方法を解説します。
オプションの紹介
まずはオプションの説明です。
オプション | 概要 |
---|---|
--server, -s | ローカルサーバーのルードディレクトリを設定 (初期値はカレントディレクトリ) |
--files, -f | 監視するファイルパス |
--proxy, -p | 既存のサーバーをプロキシする |
--port | 使用するポートを指定する |
--no-open | ブラウザを開かないようにする(引数はなし) |
package.jsonのscritpsに登録
完成したnpm-scritpsは以下です。
- オプションは
--<option>
の後に半角スペースを開けて、オプションの引数を記載し、引数が複数ある場合は半角スペースを開け続けて記載します。 -s
は初期値はカレントディレクトリのため、引数は省略しています。--files/-f
のようにオプション名を省略できる場合は-<option>
で記載することも可能です。
{
"scripts": {
// "『①スクリプト名』": "『②使用するパッケージ + start』『③オプション』『④オプションの引数』",
"browser": "browser-sync start -s -f \"assets\" \"index.html\" --port \"4000\" --no-open"
},
}
\" \"
はエスケープ処理です。
Windowsではシングルクォーテーションを使用することができない為、シングルクォーテーションをダブルクォーテーションに置き換えエスケープ処理を行う必要があります。
それではnpm run browser
を実行して動作を確認してみましょう。
スマホで表示の確認をする
冒頭でも説明しましたがBrowserSyncでは同じネットワーク間で表示を同期させることが可能です。
この機能を使ってローカル環境の表示をサーバーにアップロードせずに実機のスマートフォンで表示を確認することができます。
ターミナルでnpm run browser
コマンドを実行すると以下のようなログが表示されます。
このExternal:
の値のURLをブラウザで開くと全てのブラウザで表示が同期されます。
同じネットワークに繋がっているスマートフォンでURLを開いてみましょう。
これで開発中にスマートフォンでの挙動の確認を簡単に行えるようになります。
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.000.000:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://192.168.000.000:3001
---------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
おわり
プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていいただけますと幸いです。