開発

electron-connectでLivereloadができなかった件

忙しくツール作成の時間が作れず、師走を実感してしまう今日此の頃。
環境を整えつつコードもいじっているのですがmobaXterm便利ですね。
VNCの接続が何故か切れてしまうので試しに入れてみたらものすごい快適です。

さて、色々覚えながらなので結果がすぐにわかるようにコードをセーブアンドリロードしながらやっているのですがこれでは効率が悪い。調べてみると自動でリロードしてくれる仕組みがあるとのことで早速electron-connectを導入してみました。

で、ググって設定をしてみたのですがうまく動いてくれない。
大体ネットで得られるのはこのような設定。

main.js

...
let mainWindow
let client = require('electron-connect').client
...
let createWindow = () => {
...
  // For electron-connect
  client.create(mainWindow);
...

index.html

<head>
...
  <script>require('electron-connect').client.create()</script>
</head>

gulpfile.js

var electron = require('electron-connect').server.create();
...
gulp.task('server', function(){
  electron.start;
  gulp.watch(['*.js'], electron.restart);
  gulp.watch(['*.html'], electron.reload);
...

これでgulp serverとやっても何もおこならない。
そもそもどういう動作になるのか想定結果がわかってないので困りました。
electron.startが恐らくブラウザ起動してくれるのだと思ったのですが画面に変化がないので、VNCやmobaXtermがおかしいのかと調べてみたがどうもそうではないらしい。

そういえばelectronを立ち上げるときに引数を指定していたと思い出してディレクトリ情報を渡してみました

こんな感じに修正。

gulpfile.js

var electron = require('electron-connect').server.create();
...
gulp.task('server', function(){
  electron.start('.');
  gulp.watch(['*.js'], electron.restart);
  gulp.watch(['*.html'], electron.reload);
...

そして再度gulp serverするとelectronが立ち上がってきました。
jsやhtmlを変更すると最新の状態にリロードや再起動してくれます。
うーむ、electronのバージョンで動きが違うのでしょうか?v1.4.8ではこのような設定で動きました。
色々試してみるとclient.create(mainWindow);の記述はなくても動きました。

追記

gulpからFuseBoxに移行しました。ホットリロードはこちらが簡単でした。

管理人

Recent Posts

CanvaがSerif (Affinity) を買収

私は使ったことがないのですが名前はよく聞…

3週間 ago

Serifのスプリングセール – アドオンが50%オフ

Affinity Photoなどレタッチ…

1か月 ago

音声がロボットのようになるときの対処

リモート会議などでたまに相手の音声がおか…

2か月 ago

Serifのブラックフライデー – 全品40%オフ V1ユーザは更にお得!

恒例のブラックフライデーセールが始まりま…

5か月 ago

[rust] rayonで書き直してみました

前回のコードを元にrayonを使った処理…

5か月 ago

[rust] async-stdで書き直してみました

前回のコードをasync-stdで書き直…

6か月 ago