前回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']);
});
|
ブラウザからはポート3000でアクセス。
うちの環境(Vagrant)の場合http://192.168.33.10:3000/