Disconnected from BrowserSyncにすぐになってしまいます。
数回保存すると上記の状態になり、ブラウザ上ではずっと読み込み中になって、
再読み込みをしてくれません。
dest-afterとsrc-beforeは同じディレクトリ上にあります。
かなり不安定なのですが下記ソースに問題があるのでしょうか？
それとも、監視するファイル数が多かったり、
読み込むプラグインが多いので、画像圧縮などのプラグインはコメントアウトしておくべきなのでしょうか？
監視するファイル数をcssだけにすると多少安定するのでその可能性はあるかなとも思うのですが、
flocssを採用して、postcssでトランスパイルしていると、どうしてもcssファイルをコンポーネントごとに分離するので、
数十個になり、srcとdestに分かれてしまい大量のファイルにならざる負えないですよね。

https://teratail.com/questions/58772で回答が得られなかったため、こちらで質問させて頂きました。

問題の発生しているgulpfile

const plugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];


 gulp.task("css", function(){
    gulp.src('./src-before/**/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest-after/css'));
});

gulp.task('watch', function(){
    gulp.watch(['src-before/**/*' , 'src-before/**/**/*'], ["css"]);
});

  gulp.task("server", function () {
        //初期設定です
        browserSync.init({
            server: {
            baseDir: "./dest-after/" 
            }
        });

  gulp.watch (['dest-after/index.html','dest-after/js/*', 'src-before/app.css' , 'src-before/**/*' , 'src-before/**/**/*'], browserSync.reload);
});

gulp.task("default", ["watch", "server"]);

https://teratail.com/questions/58772
の回答がないのでこちらにしました。

・下記のようにしましたが、変わりませんでした。watch専用のタスクがあるのですがこれが悪さをしているのですかね？
また、
"dest-after/index.html",
"dest-after/js/*.js",
"dest-after/app.css",
の部分はこれらが更新されたときにリロードされるということでよいでしょうか？

const plugins = [
    require('postcss-import'),
    require('postcss-cssnext')({
      browsers: [
        'last 2 version',
        'iOS >= 8.1',
        'Android >= 4.4',
      ],
    }), //ソースではわからないが、IE9以上は、remが使えるので、remからpxを生成されないように、こちらで行っている
    require('csswring')
];


 gulp.task("css", function(){ //return gulp.srcのreturnは上から順番に処理するという意味
    gulp.src('./src-before/**/*.css')
        .pipe(postcss(plugins))//PostCSSにファイルを処理してもらう。pluginsは変数
        .pipe(gulp.dest('./dest-after/css'));//生成されたCSSの排出先。dest-after/cssの中に配置
});

gulp.task('watch', function(){
    gulp.watch(['dest-after/index.html', 'dest-after/js/*', 'src-before/**/*' , 'src-before/**/**/*'], ["css"]);
});
// ブラウザシンク
  //ローカルサーバーを立て、
  //ファイル更新時に自動リロードするタスクです
  gulp.task("server", function () {
        //初期設定です
        gulp.task("server", function () {
    browserSync.init({
        server: {
            baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。
        },
        files: [
            "dest-after/index.html",
            "dest-after/js/*.js",
            "dest-after/app.css",
        ]
    });
});
        // browserSync.init({
        //     server: {
        //     baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。
        //     }
        // });

  gulp.watch (['dest-after/index.html', 'dest-after/js/*', 'src-before/**/**/*'], browserSync.reload);
}); // 左で指定したファイルに変更があったら下記のブラウザシンクを更新するように指定する。


gulp.task("default", ["watch", "server"]);