docker-composeを使いつつgulpでブラウザを自動更新する #Docker

PHPを使いつつSCSSを使いたい場面があり、作業効率を確保する為にDockerとgulpを同時に使用する方法を選びました。
もっと楽に出来る方法がありそうですが、さくっと環境構築を終わらせたかったので自分の知っている方法だけで終わらせました。
※MAMPを使っている方は、記事に記載している Docker ・ docker-compose のインストールと使用は不要です。

叶えたいこと

PHPを使いつつSCSSの自動コンパイルを行いたい。(ApacheとNode.jsを同時に使用したい。)
作業ファイルを保存したらブラウザを自動更新したい。(手動でリロードする手間を省きたい。)

環境

MacOS
npmのバージョン・・・6.4.1
Node.jsのバージョン・・・10.6.0
gulpのバージョン・・・4.0.0

前提

以下がインストール済みであることを前提としています。

Docker
docker-compose
Node.js
npm
gulp

ディレクトリ構造

作業ディレクトリ             
├── gulpfile.js
├── htdocs ・・・「localhost:8080」で見るディレクトリ
├── node_modules
├── package.json
├── src　・・・作業ファイルを入れるディレクトリ。gulpで更新後のファイルをhtdocsに入れる。
└── yarn.lock

設定ファイルの内容

docker-compose.yml

version: '3'

services:
  apache:
    image: php:7-apache
    volumes:
      - $PWD:/var/www/html
    ports:
      - 8080:80

gulpfile.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();
const runSequence = require('gulp4-run-sequence');
const DEST_DIR = './htdocs/';

gulp.task('browser-sync', function(){
    browserSync.init({
    proxy: 'localhost:8080' // ←docker-composeで指定したport
    });
});

gulp.task('bs-reload', function(){
    browserSync.reload();
});

gulp.task('hoge', function() {
    return gulp.src(['src/hogehoge/**/*.hoge'])
    .pipe(gulp.dest(DEST_DIR))
});

gulp.task('default', gulp.series(
  gulp.parallel('browser-sync', 'hoge', function() {
    watch([/*作業対象のファイル*/], function() {
        return runSequence(
            'hoge',
            'bs-reload'
        );
    });
  })
));

※ hoge は任意で設定
※途中の設定は諸々省略して記載しています。

使い方

作業ディレクトリのルートで npm i を実行し、必要なパッケージをダウンロード
htdocs に移動し、 docker-compose up -d を実行し、ダウンロードが完了したら docker-compose start を実行
作業ルートに戻りgulpコマンドを実行し、ローカルサーバーを起動する

※ ローカルサーバー起動後は localhost:8080 ではなく localhost:3000 で表示されます。(port3000が使用済みなら3001)