webpackelectron開発してると、毎回トランスパイルして起動というのが面倒だなと思ってくる。Replacementを使えばもっと早くできるようだが、僕には理解できなかった。gulpを使えばそれなりに実現できる!!とわかり挑戦してみたので、備忘も込めて投稿しようと思う。Webpack環境で、LiveReloadできるようする。下図は、Electron起動時にデベロッパーツールを起動させる設定にしていたのをコメントアウトして保存すると自動でElectronが再起動してるもの。Electron開発で構築した以下の環境を利用する。4.2.0webpackの詳細の設定は、前回の記事参照。electron-connectwebpack-streamは、gulpとwebpackをつなぐために使用し、electron-connectは、コンパイル後にelectronを再起動したり、再ロードするなどelectronを制御するために使用する。gulpfile.jsで設定ファイルを作成する。両方の設定を個別に読み込んでからmain用とrender用のタスクを定義するように記述した。mainのコンパイルを終了すると,electronをRestart。rendererコンパイルが終了するとReload。gulpでgulpを起動させたときには、defaultタスクが実行される。rendererタスクが実行されコンパイルが走る。実行されるように設定している。index.htmlの修正gulpで起動したelectron制御サーバと通信するためのクライアントをindex.html側に作成する。これにより、ファイル変更時にelectronの再起動や再ロードが自動で実行される。...</html>以上で設定完了。その度に自動でelectronが再起動したり、最ロードされる。さいごにLiveReloadの設定は、gulpを使うとあっという間にできてしまう。自動とはいえ再ロードには結構時間かかるので微妙ではある。理解していきたい!!ともあれgulpのすごさに感動。