開発

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);
...Code language: JavaScript (javascript)

index.html

<head>
...
  <script>require('electron-connect').client.create()</script>
</head>Code language: HTML, XML (xml)

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);
...Code language: JavaScript (javascript)

これで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);
...Code language: JavaScript (javascript)

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

追記

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

管理人

Recent Posts

情報セキュリティマネジメント試験取得への道

スキルアップを図るべく情報セキ…

2か月 ago

ファイナンシャルプランナー3級試験取得への道

スキルアップを図るべくファイナ…

2か月 ago

[rust] New Type Patternを使ってみる

DDDの考えを取り入れることで…

5か月 ago

RustでDDDの要素を取り入れてみる

前回SOLID原則というものを…

5か月 ago

期間限定!書籍無料キャンペーン2025

「mdBookではじめるKin…

5か月 ago