gulp4 sassコンパイルが動かない

Question

gulp 4.0.2を使用していますが、sassコンパイル＋リロードができるときとできない時があり、困っています。

gulpfile.js

const gulp = require('gulp');

const gulpSass = require('gulp-sass'); // sassコンパイル
const sassGlob = require('gulp-sass-glob');
const autoprefixer = require('gulp-autoprefixer'); // ベンダープレフィックス自動付与
const plumber = require('gulp-plumber'); // コンパイルエラー時にコネクト解除しない
const notify = require('gulp-notify'); // エラー時にデスクトップに通知
const browserSync = require('browser-sync'); // ブラウザー自動リロード
const gcmq = require('gulp-group-css-media-queries'); //メディアクエリをまとめる
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');

const baseDir = './resource';
const dist = './public';

// browserSync sync
gulp.task('browser-sync', () => {
  return browserSync.init({
    server: {
      baseDir: dist, // 対象ディレクトリ
      index: 'index.html', // インデックスファイル
    },
    reloadOnRestart: true,
  });
});

//HTML PHP リロード自動更新
const reload = (done) => {
  browserSync.reload();
  done();
};

//webpack
const webpackRun = (done) => {
  webpackStream(webpackConfig, webpack)
    .on('error', function (e) {
      this.emit('end');
    })
    .pipe(gulp.dest(dist + '/js/'));
  done();
};

//sassコンパイル、ベンダープレフィックス自動付与
const sass = (done) => {
  gulp
    .src(baseDir + '/sass/**/*.scss', { sourcemaps: true })
    .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする
    .pipe(
      plumber({
        errorHandler: notify.onError('<%= error.message %>'),
      })
    )
    .pipe(gulpSass({ outputStyle: 'expanded' }))
    .pipe(autoprefixer({ grid: true }))
    .pipe(gcmq())
    .pipe(gulp.dest(dist + '/css'), { sourcemaps: './maps' })
    .pipe(browserSync.stream());
  done();
};

// watch
const watch = () => {
  gulp.watch(baseDir + '/sass/**/*.scss', gulp.series('sass'));
  gulp.watch(baseDir + '/js/**/*.js', gulp.series('webpack', 'reload'));
  gulp.watch(baseDir + '/vue/**/*.vue', gulp.series('webpack', 'reload'));
  gulp.watch(dist + '/*.{html,php}', gulp.series('reload'));
};

gulp.task('reload', reload);
gulp.task('webpack', webpackRun);
gulp.task('sass', sass);
gulp.task('watch', watch);

//デフォルトタスク
exports.default = gulp.parallel('watch', 'browser-sync');

npm run gulp で処理を走らせています。
このようになって、監視状態には入っていますが、

[10:03:01] Using gulpfile /Volumes/web/gulpfile.js
[10:03:01] Starting 'default'...
[10:03:01] Starting 'watch'...
[10:03:01] Starting 'browser-sync'...
[Browsersync] Access URLs:
 ----------------------------
 Local: http://localhost:3000
 ----------------------------
    UI: http://localhost:3001
 ----------------------------
[Browsersync] Serving files from: ./public

その後scssファイルを保存しても何も起こらない・・といった感じです。
もう一度gulpし直すと、できることもあり、

ディレクトリは、下記のようになっています。
public/css/style.css
resource/sass/_global.scss
resource/sass/_reset.scss
resource/sass/_variable.scss
resource/sass/common/（以下いろんなファイル名のscssファイル）
resource/sass/component/（以下いろんなファイル名のscssファイル）
resource/sass/pages/（以下いろんなファイル名のscssファイル）
resource/sass/style.scss
できる時もあるので、ディレクトリは間違ってはいないと思います。

関係あるかわかりませんが、下記部分をコメントアウトすると

.pipe(gulp.dest(dist + '/css'), { sourcemaps: './maps' })

下記のように動きはする（というか、成功率があがる）ようです
当然このままだと保存されませんが・・

[10:17:20] Starting 'sass'...
[10:17:20] Finished 'sass' after 5.53 ms
[Browsersync] 1 file changed (style.css)

よろしくお願いいたします。

Comments

[miyabi_pudding]

他の監視などは動いておりますか？

[popc]

webpackとhtmlリロードもsassと同じような状況です。（vueは今確認できていませんが、おそらく同じだと思います…）
ちなみになのですが、一度動いた時は、２回め以降も動きます（webpackなども同様）。１度目で動かなかったらその後もgulpし直すまで動かないといった状況です。

Answer 1

かなり時間がかかりましたが、自己解決しました。

watchのところに{ usePolling: true }をつけたすことで
確実に動作するようになりました。

gulp.watch(baseDir + '/sass/**/*.scss',{ usePolling: true }, gulp.series('sass'));