0

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"]);
4
  • BrowserSync が応答しなくなった時 gulp コマンドはどうなっていますか? 終了してしまっていますか? それとも実行が続いていて BrowserSync 以外の機能は動いていますか? エラーや警告、ログなどを出力していませんか?
    – mjy
    Commented 2017年1月4日 5:23
  • ありがとうございます。ソースを質問欄に入れました
    – web
    Commented 2017年1月4日 5:58
  • teratailの質問よりgulpfileを転載させて頂きました。ところで(そもそもマルチポストは推奨されませんが、)やむを得ず行った場合は他サイトへの質問にもマルチポスト先へのリンクやそこで得られた解答を書いておくのがマナーです。 teratail.com/help
    – hinaloe
    Commented 2017年1月5日 13:36
  • 向こう側は回答がなくリンクも記載していましたがutilityが入らなかったので削除したのです。再度報告するのでコメントは削除してください。
    – web
    Commented 2017年1月6日 0:21

2 件の回答 2

1

こういう問題は難しいですね。
デバッグ作業のように原因を絞り込んでいくしかないと思います。
以下は直接の回答ではなく、作業の例です。

HTML を最低限の物にしてみる

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1>Test</h1>
</body>
</html>

index.html でテストされているようですから、これを上記のような最低限の物にします。
これで問題が再現しなくなったとすれば、少なくとも原因の一部が HTML にあった事になります。

gulp の watch 以外によるリロードを繰り返してみる

デフォルトだと http://localhost:3001/ で BrowserSync の UI にアクセス出来ます。
ここで「Reload all」というアクションが出来ますので、これを連続して行います。
これで問題が再現したとすれば、ファイルの変更が問題のトリガーではないという事になります。

gulpfile.js を一度削ってから機能を足していき、いつ問題が再現するか観察する

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const dest = './dest';  // 出力先フォルダ

gulp.task("server", function () {
    browserSync.init({
        server: {
            baseDir: dest,
        },
    });
    gulp.watch ([`${dest}/**/*`], browserSync.reload);
}); 
gulp.task("default", ["server"]);

上記は BrowserSync の機能のみ提供する gulpfile.js ですが、これくらいの物から始めてテストします。(逆に現状から少しずつ削っていったりと、やり方はいろいろあると思います)


私も BrowserSync が応答しなくなり再起動が必要になっていた事はあります。
ただ、半日以上は持っていたので、特に対策はしませんでした。
仮に、私がこういった問題を抱えたとしたら、あきらめます。
テンプレート的に公開されている動く gulpfile.js をいじらずに使い、自分のプロジェクトをそれに合わせます。
あるいは別のビルドツールに移行します。
ビルドツールにあまり時間を費しても仕方がないと思いますので。

10
  • ありがとうございます。 私も時間を節約するためなのにむしろ時間を無駄をしているようにしてなりません。しかもgulpもすでに古くnmpパッケージか何かで行う方にすでにいこうしているらしいので、gulpの学習をしても時間の無駄かもしれないですね。
    – web
    Commented 2017年1月5日 2:26
  • <link rel="stylesheet" href="css/app.css">を外すと安定することがわかりました。 ただ、app.cssにまとめてミニファイした後なのでなぜだけはっきりとわかりません ミニファイ前はflocssの弊害で数十のcssファイルになっているので、数が多すぎるのが原因だとわかるのですが、 ミニファイ後だとひとつのcssなので理由がよくわかりません。 もしかするとutilityに大量のcssテキスト情報があるので、 あまりにもテキスト情報が多すぎるのが原因なのですかね? それにしてもここは勝手にコメントが終了してしまい使いにくいですね。
    – web
    Commented 2017年1月5日 2:57
  • ちなみに教えてもらったmetaで質問したところここに質問の続きを書いてよいのではといわれました
    – web
    Commented 2017年1月5日 3:01
  • @web なるほど。大分絞れましたね。質問サイトでこれ以上の解決を目指すならば、最小限の・自己完結した・確認可能なサンプルコードにして、回答者が手元で再現可能な形で質問する事になります。gulpfile.js から、csshtml 全て最小限の物にするのは大変かも知れませんが、まあ、デバッグ作業というのはそういう物ですね。
    – mjy
    Commented 2017年1月5日 5:36
  • Meta サイト での質問は見付けられませんでした。
    – mjy
    Commented 2017年1月5日 5:37
1

BrowserSyncのCSSリロードについては、毎回ページごとリロードするのではなく、ファイルの更新の際にCSSのみ差し替える事が可能です。
(browserSync.reloadはたしかBS上で開いているすべてのページをリロードしますよね。)

BrowserSync初期化時のfilesオプションや、browserSync.streamを用いることでこれが可能です。

個人的にはfilesオプションを使用するほうが手軽で確実かと思ってます。

たとえば最小限のgulpfileだとこんな感じ。

const bs = require("browser-sync");
const gulp = require("gulp");

gulp.task("serve", e=>{
    bs.init({
        server: {
            baseDir: "." 
        },
        files: [
            "app.css",
            "**/*.html"
        ]
    });
});

app.cssが更新されるとapp.cssが動的に差し替えられ、index.htmlが更新されれば開いているindex.htmlがリロードされます。

提示されたgulpfileであれば、

gulp.task("server", function () {
    browserSync.init({
        server: {
            baseDir: "./dest-after/" 
        },
        files: [
            "dest-after/index.html",
            "dest-after/js/*.js",
            "dest-after/app.css",
        ]
    });
});

のように書けば適切にライブリロードされるのではないでしょうか。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。