gulpでbrowserSyncを使用したら１回しかリロードされない

Question

前提・実現したいこと

dockerでwordpressをローカルで動かして
gulp、webpackを使用して、開発環境を構築しています。

gulpfile.jsに
・pug、sassのコンパイル
・webpackを利用してJavascriptをバンドル
・watch
という内容を記述し
問題なく動きました。

そこで、
browserSyncを利用して
ブラウザ立ち上げ、自動リロードの機能を追加したところ、
ブラウザが立ち上がりましたが、１回しかリロードしませんでした。

２回目以降もリロードするには
どのようき書き換えればよろしいでしょうか。

発生している問題・エラーメッセージ

[18:38:37] Using gulpfile ~/work/local_server/sangyo_local/gulpfile.js
[18:38:37] Starting 'default'...
[18:38:37] Starting 'cssSass'...
[18:38:38] Finished 'cssSass' after 99 ms
[18:38:38] Starting 'Pug'...
[18:38:38] Finished 'Pug' after 31 ms
[18:38:38] Starting 'bundle'...
[18:38:38] Version: webpack 4.44.2
Built at: 2020-09-21 18:38:38
    Asset       Size  Chunks             Chunk Names
bundle.js  999 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[18:38:38] Finished 'bundle' after 581 ms
[18:38:38] Starting 'browserSyncTask'...
[18:38:38] Starting 'bundle'...
[18:38:38] Starting 'watchFiles'...
[18:38:38] Finished 'watchFiles' after 197 ms
[18:38:38] Version: webpack 4.44.2
Built at: 2020-09-21 18:38:38
    Asset       Size  Chunks             Chunk Names
bundle.js  999 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[18:38:38] Finished 'bundle' after 241 ms
[Browsersync] Proxying: http://localhost:8000
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.11.5:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[18:38:52] Starting 'cssSass'...
[18:38:52] Finished 'cssSass' after 14 ms
[18:38:52] Starting 'bsReload'...
[Browsersync] Reloading Browsers...

該当のソースコード

const { src, dest, watch, series, parallel } = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
var browserSync = require('browser-sync')

// webpackの設定ファイルの読み込み
const webpackConfig = require("./webpack.config");

const Pug = () => {
    return src('./workspace/pug/**/*.pug') //コンパイル元
    .pipe(plumber()) //エラーが起きてもそのまま処理
    .pipe(pug({
        pretty: true //改行
    }))
	.pipe(rename({
		extname: '.php' //PHPファイルとして出力
	}))
    .pipe(dest('./html/wp-content/themes/sangyo/'))     //コンパイル先
}

const cssSass = () => {
    return src('./workspace/scss/**/*.scss') //コンパイル元
    .pipe(autoprefixer({ //ベンダープレフィックスつける
        cascade:false //ベンダープレフィックス付きのプロパティのインデントを整形する
    }))
    .pipe(plumber())
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('./html/wp-content/themes/sangyo/css'))     //コンパイル先
}

const bundle = () => {
    // ☆ webpackStreamの第2引数にwebpackを渡す☆
    return webpackStream(webpackConfig, webpack)
    .pipe(dest('./html/wp-content/themes/sangyo/js'))     //コンパイル先
}

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

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

//ファイル監視
const watchFiles = (done) => {
    watch('./workspace/scss/**/*.scss', series(cssSass,bsReload)) //watch('監視するファイル',処理)
    watch('./workspace/pug/**/*.pug', series(Pug,bsReload))
    watch('./workspace/js/**/*.js', series(bundle,bsReload))
    done();
}

exports.default = series(series(cssSass,Pug,bundle), parallel(browserSyncTask,bundle,watchFiles));

試したこと

以下の情報は記述方法が異なり解決には至りませんでした。
https://teratail.com/questions/168814

gulpの書き方は以下を参考にしました。
「コラム：task()メソッドを使う方法は非推奨？」
https://ics.media/entry/3290/

補足情報（FW/ツールのバージョンなど）

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.12",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0"
  },
  "browserslist": [
    "last 2 version",
    "> 5%",
    "ie >= 9"
  ],
  "dependencies": {
    "webpack": "^4.44.2",
    "webpack-stream": "^6.1.0"
  }
}

Comments

[runnynose]

修正依頼でも、回答でもないんですが、私もDocker環境でgulpのwatchを試したところ、同じ事象に会いました。クライアントマシン上では問題なく動くのですが。。。

Answer 1

質問者のコードで動きそうだけど、なぜか動かないですね。。。
以下の対応で動きました。

対応内容

watchの引数には直接task処理の関数を渡す

    watch('./workspace/scss/**/*.scss', cssSass) //watch('監視するファイル',処理)
    watch('./workspace/pug/**/*.pug', Pug)
    watch('./workspace/js/**/*.js', bundle)

各タスクの終了後にreloadを行う

    .pipe(dest('./html/wp-content/themes/sangyo/'))     //コンパイル先
    .on('end', ()=> bsReload())