前回gulp-watchでソース更新をトリガーにして色々自動でやってくれるようになりましたが、うちの環境ではlivereloadがうまく動いてくれなかったので、BrowserSyncに乗り換えてみました。プラグインいらないし、こっちの方が好みかも。

BrowserSyncインストール

プロジェクトフォルダ(packeage.jsonがおるとこ)で

1

npm install browser-sync --save-dev

gulpfile.babel.js編集

先頭部分に

1

import browserSync from 'browser-sync';

追加。

watchタスクのlivereloadをbrowserSyncに置き換え。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

gulp.task('watch', () => {
    var testFiles = _.union(paths.client.test, paths.server.test.unit, paths.server.test.integration);

    //plugins.livereload.listen();
     browserSync.init({proxy: "localhost:" + config.port}); //置き換え

    var wc_opt={usePolling:true};   //追加！
    plugins.watch(paths.client.styles, wc_opt , () => {  //['inject:scss'] //wc_optwを第二引数に
        gulp.src(paths.client.mainStyle)
            .pipe(plugins.plumber())
            .pipe(styles())
            .pipe(gulp.dest('.tmp/app'))
            //.pipe(plugins.livereload());
            .pipe(browserSync.stream());    //置き換え
    });

    plugins.watch(paths.client.views, wc_opt) //wc_optwを第二引数に
        .pipe(plugins.plumber())
        //.pipe(plugins.livereload());
        .pipe(browserSync.stream());    //置き換え

    plugins.watch(paths.client.scripts, wc_opt) //['inject:js'] //wc_optwを第二引数に
        .pipe(plugins.plumber())
        .pipe(transpileClient())
        .pipe(gulp.dest('.tmp'))
        //.pipe(plugins.livereload());
        .pipe(browserSync.stream());    //置き換え

    plugins.watch(_.union(paths.server.scripts, testFiles), wc_opt) //wc_optwを第二引数に
        .pipe(plugins.plumber())
        .pipe(lintServerScripts())
        //.pipe(plugins.livereload());
        .pipe(browserSync.stream());    //置き換え

    gulp.watch('bower.json', ['wiredep:client']);
});

ブラウザからはポート３０００でアクセス。

うちの環境(Vagrant)の場合http://192.168.33.10:3000/