gulp を利用して Electron で LiveReaload を行う

Electron

gulp を利用して Electron で LiveReaload を行うことができます。

[ディレクトリ構成]

.
|--gulpfile.js
|--index.html
|--main.js
|--package.json

[gulpfile.js]

var gulp = require('gulp');
var electron = require('electron-connect').server.create();

// Electron起動
gulp.task('start', function(){
  // Electron開始
  electron.start();

  // ファイルの監視
  // BrowserProcess が読み込むファイルが変更されたら Restart
  gulp.watch(['main.js'], electron.restart);
  // RendererProcess が読み込むファイルが変更されたら Reload
  gulp.watch(['./*.{html,js,css}'], electron.reload);
});

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <!-- gulp 側へ建てた server へ接続する -->
    <script>require('electron-connect').client.create()</script>

    <h1>Hello World</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

[main.js]

'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});

  mainWindow.loadURL('file://' + __dirname + '/index.html');

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

[package.json]

{
  "name": "livereload",
  "main": "main.js",
  "devDependencies": {
    "electron-connect": "^0.3.7",
    "gulp": "^3.9.1"
  }
}

インストール

$ npm install

Electron の起動

$ gulp start

これで直下の .html や .js が更新された場合に Electron がリロードされ、main.js が更新されたら　Electron が再起動するようになります。
gulp べんり。

参照