31619


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

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

* * *

問題の発生しているgulpfile

[code]

    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"]);
    
[/code]

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

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

[code]

    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"]);
    
[/code]


CC BY-SA 3.0
2017-01-04T01:12:10.883
31598
2017-01-06T01:17:29.827
2017-01-06T01:17:29.827
14320
14320
question
javascript css gulp
Disconnected from BrowserSyncにすぐになってしまいます。


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

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

[code]

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
        <h1>Test</h1>
    </body>
    </html>
    
[/code]

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

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

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

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

[code]

    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"]);
    
[/code]

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

* * *

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


CC BY-SA 3.0
2017-01-04T14:46:25.603
31619
2017-01-04T14:46:25.603
3054
31598
answer


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

BrowserSync初期化時の[`files`オプション](https://www.browsersync.io/docs/options#option-
files)や、[`browserSync.stream`](https://www.browsersync.io/docs/gulp#gulp-sass-
css)を用いることでこれが可能です。

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

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

[code]

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

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

提示されたgulpfileであれば、

[code]

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

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


CC BY-SA 3.0
2017-01-05T14:14:31.337
31642
2017-01-05T14:14:31.337
2376
31598
answer