5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Organization

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

やりたいこと

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

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
Sign upLogin
5
Help us understand the problem. What are the problem?