Help us understand the problem. What is going on with this article?

docker & gulp(brower-sync)で環境作りたい!

More than 1 year has passed since last update.

やりたいこと

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

 課題

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

参考サイト

https://qiita.com/Black-Yamasan/items/5b7d5feceed95cebbcad

 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を好きなところで呼び出して自動リロードできるようになります。やったぜ!

irico
新米フロントエンドエンジニアです。 得意なのはギターを弾くこと、苦手なことは運動です。 ゲーム(特にノベル物)が趣味です🎮
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away