WordPressの構築を行う際は、LocalやMAMPなどのツールを利用してローカル環境を構築し、開発を行うことが一般的です。
しかし、これらのツールだけでは完全なホットリロード機能が提供されていないことがあります。
そこで、今回はそれらのWordPressのローカル環境作成ツールを使用しながら、ホットリロードを実現できるBrowserSyncというツールについて解説します。
さらに、BrowserSyncを導入することで、ブラウザのホットリロード機能だけでなく、WordPressの特有のデータベース情報などをサーバーに反映させることなく、ローカル環境のデータをそのまま実機のスマートフォンで、表示を確認することができるなどの利点が得られます。
この記事を通じて、BrowserSyncの活用方法を身につけ、より効率的なWordPress開発を実現しましょう。
なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。
INDEX
BrowserSyncとは
BrowserSyncはローカルサーバーを立ち上げ、ブラウザをリロードすることなく、コードの変更をリアルタイムに反映させることができます。つまり開発者はコードを編集すると同時にブラウザでその変更を即座に確認することができます。
さらに、BrowserSyncは同じネットワーク上の複数のブラウザやデバイスで閲覧を同期させるため、テストサーバーにファイルをアップロードさせる必要なく、実機のスマホで表示を確認することができるため、自動リロード以外にも大きなメリットがあります。
それではBrowserSyncをインストールして実際に使って見ましょう。
プロジェクトの準備
プロジェクトフォルダを作成
今回はthemesディレクトリ内に、以下のようなディレクトリ構造のWordPressテーマが入っている想定で進めていきます。
my-theme
└assets/
└images/
└img.jpg
└css/
└style.css
└js/
└main.js
└style.css
└functions.php
└index.htmlプロジェクトフォルダを作成したら以下のコマンドでpackage.jsonを作成します。
npm init -yパッケージのインストール
以下のコマンドで今回利用するbrowser-syncのパッケージをインストールします。
npm i -D browser-syncpackage.jsonのdevDependenciesに以下のようにインストールしたパッケージが記載されたら成功です。
{
"devDependencies": {
"browser-sync": "^3.0.2"
}
}設定ファイルの準備
設定ファイルを作成
まずはホットリロードの設定を行うための設定ファイルを作成します。
以下のコマンドでBrowserSyncの設定ファイル、bs-config.jsファイルを作成しましょう。pacakage.jsonを同じディレクトリにbs-config.jsファイルが作成されていることを確認してください。
npx browser-sync initinitコマンドとは設定ファイルの初期化コマンドです。コマンドを実行すると対象の設定ファイルがカレントディレクトリに作成されます。
記載されているコードは全て初期値が入っています。
また、ファイルの中身を書き換えた状態で再度initコマンドを実行すると中身が初期化されてしまう為、注意が必要です。
生成されたbs-config.jsファイルには以下のようなたくさんのコードが記載されおり、全てBrowserSyncのオプションの初期値の設定になっています。
BrowserSyncではこのオプションを変更することで、それぞれのプロジェクトに合わせたカスタマイズを行うことができるようになります。
/*
|--------------------------------------------------------------------------
| 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
};設定ファイルを初期化
bs-config.jsファイルは、デフォルトの状態で上記のように多くのオプションが記述されていますが、ファイル内の記述を削除しても、初期設定の内容は消えません。
今回は必要な項目が2つだけなので、以下のようにmodule.exportsだけ残して、その他は全て削除しましょう。
module.exports = {
};設定ファイルにホットリロードの設定を追加
それでは設定ファイルにホットリロードを行うための設定を追加しましょう。
以下のようにbs-config.jsファイルにそれぞれ設定を追加してきます。
ホットリロードの対象のサイトを設定
それでは設定ファイルにホットリロードを行う、ローカル環境のURLを設定しましょう。
以下のようにproxyセクションに、WordPressのローカル環境のURLを追加します。
module.exports = {
"proxy": "fukulog.local"
};監視対象ファイルの設定
次に監視対象のファイルを設定します。
監視対象を設定することで、対象にしたファイルが更新されるたびに、上記で設定した対象サイトがホットリロードされ、ブラウザの表示が更新されます。
監視対象ファイルはfilesセクションで設定します。
今回は全ての.phpファイルと、assetsディレクトリ内の全ての.cssと.jsのファイルを監視対象に設定しました。
それぞれご自身の環境に合わせて、対象ファイルをセットアップしてください。
module.exports = {
"files": [
"assets/**/*.{css,js}",
"**/*.php",
]
};/**/はディレクトリの中の全てのファイルを対象とする記述です。
完成ファイル
以下が完成したbs-config.jsファイルです。
module.exports = {
"proxy": "fukulog.local",
"files": [
"**/*.php",
"assets/**/*.{css,js}"
]
};ホットリロードの実行
それでは、以下のようにnpm-scriptsに先ほどのbs-config.jsファイルの設定を追加し、BrowserSyncでローカルサーバーを立ち上げてみましょう。
{
"scripts": {
"browser": "browser-sync start --config bs-config.js"
},
}ターミナルでnpm run browserコマンドで実行してみましょう。http://localhost:3000/が立ち上がったらBrowserSyncでのホットリロードの環境構築は成功です。
BrowserSyncを実行する際は、あらかじめLocalなどのツールでローカル環境を立ち上げた状態で行ってください。
あらかじめ立ち上がっているローカル環境ではホットリロードは適応されないので、必ずBrowserSyncで立ち上げた方のURLで開発を行う必要があります。
スマホで表示の確認をする
最後に冒頭で説明した、実機のスマートフォンで表示を確認する方法の説明です。
ターミナルでnpm run browserコマンドを実行すると以下のようなログが表示されます。
このExternal:に記載されているURLで開くと、同じネットワークにいるデバイス間で表示が同期されます。
このURLを、同じネットワークにいるスマートフォンで開いてみましょう。
これでサーバーに上げることなく、WordPressのローカル環境の状態をスマートフォンでも簡単に確認を行えるようになります。
[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...おわり
以上で、BrowserSyncを使用したWordPressのローカル環境をホットリロードさせる設定方法の解説でした。
今回はWordPressサイトでの使用方法に焦点を当てた内容でしたが、BrowserSyncはほとんどのWeb制作で利用できるとても便利なツールです。
以下の記事ではBrowserSyncの使い方についてより詳しく解説していますので、BrowserSyncに興味をお持ちの方はぜひ参考にしてください。
