やりたいこと

docker-composeで作ったwordpressのローカル環境でgulpのbrowser-syncを使いたい

###　課題

brower-syncのことをよく知らない
dockerで立ち上げたサーバーとbrowser-syncでのサーバーをリンクさせたい

参考サイト

##　browser-syncについて調べる
https://www.browsersync.io/docs/gulp
↑公式のドキュメントです。公式読む癖つけないと。
以下、公式から引用


var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// or...

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "yourlocal.dev"
    });
});

var browserSync = require('browser-sync').create()
のcreate()って何？と思って調べたら、
https://www.browsersync.io/docs/api
こちらの公式に以下の記述が。

Calling .create() means you get a unique reference & allows you to create multiple servers or proxies.

複数のサーバを建てられるしuniqueな参照（いまいちわからん）になるので推奨とのこと。

server:{}では指定したファイルでサーバーを構築でき、
proxy:{}では proxyで構築できる。

私の作業の場合はdockerですでに建てたサーバーを参照したいので、proxy:{}の方を使います。

実際に設定してみる

var browserSync = require('browser-sync')

function browserSyncTask() {
  return browserSync.init({
    proxy: 'localhost:8000'
  })
}

function bsReload() {
  return browserSync.reload()
}

exports.browserSync = browserSyncTask
exports.bsReload = bsReload

これでlocalhost:3000で開くようになり、
bsReloadを好きなところで呼び出して自動リロードできるようになります。やったぜ！