browserSyncを使ってWordPressのローカル環境で自動リロードさせよう【gulp4】

html/css
この記事は約9分で読めます。
スポンサーリンク

はじめに

前回はbrowser-syncを使ってhtmlやcssで作られたファイルに対して自動でブラウザをリロードさせるやり方を説明しました。

まだの方はこちらを参照してください。

今回はbrowser-syncを使ってローカル(旧:Local by Flywheel)のWordPress環境でブラウザを自動リロードする方法について説明していきます。

WordPress環境で自動リロードができるようになると非常に作業が楽になるのでぜひ導入を検討してみてください。

対象者
  • gulpを使って自動リロードさせたい方
  • 手動でブラウザを更新するのを手間に感じている方

その他gulpのおすすめのプラグインはこちら

gulpの使い方まとめについてはこちら。

gulpfile.jsのテンプレート紹介についてはこちら。

それでは説明に移ります。

スポンサーリンク

目的

前回はbrowser-syncを使ってhtmlやcssのような静的コンテンツに対して自動でブラウザをリロードさせることができました。

しかしWordPressではphpファイルといった動的コンテンツが使用されています。

そのため前回のままだと、WordPressのローカル環境では自動でブラウザをリロードできません。

そこで今回はbrowser-syncを使ってWordPressのローカル環境でも自動でブラウザをリロードできるようにしていきます。

スポンサーリンク

ディレクトリ構成

今回のディレクトリ構成は下記になります。

test
├ node_modules
├ index.php
├ style.css
├ gulpfile.js
├ package-lock.json
└ package.json

WordPressのローカル環境を動作させるためindex.php style.css を作っています。

testプロジェクト~Local Sites/<ユーザー名>/app/public/wp-content/themes に入れましょう。

スポンサーリンク

browser-syncをインストールしよう

それではbrowser-syncをインストールしていきましょう。

npm i -D browser-sync

下記コマンドをターミナルで実行してbrowser-syncをインストールします。

npm i -D browser-sync

browser-sync 公式

スポンサーリンク

gulpfile.jsを編集しよう

プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");

const bs = require("browser-sync");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function bsInit(done) {
  bs.init({
    proxy: "localhost:10020",       // ローカルにある「Site Domain」に合わせる
    notify: false,                  // ブラウザ更新時に出てくる通知を非表示にする
    open: "external",               // ローカルIPアドレスでサーバを立ち上げる
  });

  done();
}

function bsReload(done) {
  bs.reload();

  done();
}

function watchTask(done) {
  watch(["./**", "!./*.css"], series(bsReload));    //	監視対象とするパスはお好みで
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.bs = series(bsInit, bsReload, watchTask);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/
スポンサーリンク

browser-syncオプション

browser-syncの処理を定義しました。

今回定義したオプションについてまとめておきます。

オプション内容
proxylocalhost:10020proxyの設定をする。
ローカルで設定する「Site Domain」と合わせる。
notifyfalseブラウザ更新時に出てくる通知を非表示にする。
openexternalローカルIPアドレスでサーバを立ち上げる。
browser-syncで立ち上げたブラウザのURLをスマホなどの他の端末で入力すると表示される。
スポンサーリンク

proxyの設定をしよう

proxyの設定をしていきましょう。

ローカルを使ったWordPress環境ではドメインが設定されます。

ドメインに対してproxyを正しく設定すればWordPress環境でも自動でブラウザをリロードすることができます。

browser-sync option

ドメインの設定方法は2通りあるので念のためどちらのproxyの設定方法も説明しておきます。

localhost Router Mode

こちらはlocalhost:〇〇〇〇 のようになっているドメインです。

localhost Router Mode

ご自身のローカルを確認して赤枠の箇所をそのままproxyに設定しましょう。

browser-syncのオプションを変更します。

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function bsInit(done) {
  bs.init({
    proxy : "localhost:10020",  // 変更
    notify: false,
    open: "external",
  });

  done();
}

Site Domains Router Mode

以下のように自由に設定できるドメインです。

〇〇.local〇〇.wp になっているかと思います。

Site Domains Router Mode

こちらの場合も同様にproxyに設定しましょう。

browser-syncのオプションを変更します。

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function bsInit(done) {
  bs.init({
    proxy : "shuu11.wp",  // 変更
    notify: false,
    open: "external",
  });

  done();
}
スポンサーリンク

コマンドを実行しよう

proxyの設定ができたら以下コマンドを実行しましょう。

npx gulp bs

「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。

gulpのインストール先が異なる可能性があります。

以下のようになればbrowser-syncが正しく起動しました。

[00:00:00] Starting 'bs'...
[00:00:00] Starting 'bsInit'...
[00:00:00] Finished 'bsInit' after 47 ms
[00:00:00] Starting 'bsReload'...
[00:00:00] Finished 'bsReload' after 1.28 ms
[00:00:00] Starting 'watchTask'...
[Browsersync] Proxying: https://shuu1104.com
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://123.456.78.123:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------

「Ctrl」 + 「c」でbrowser-syncを終了させることができます。

ファイルを編集したらブラウザが更新することを確認しましょう。

スポンサーリンク

おわりに

以上はbrowser-syncを使ってローカルのWordPress環境でブラウザを自動リロードする方法について説明しました。

いかがだったでしょうか。

WordPress環境でブラウザを自動で更新できるようになるとものすごく作業が楽になります。

面倒に感じている方はぜひ導入してみてください。

コメント

  1. おハシ より:

    めちゃくちゃわかりやすかったです!!
    ありがとうございました!!

タイトルとURLをコピーしました