Fold All / Expand All

2016年7月10日 星期日

Livereload for Electron development - using electron-connect

https://github.com/franklai/lyric-get/commit/64d73a9d90b2872fe0ec421beb09a3fd51ef1100

覺得走 Node.js / npm 這個系統好多東西要處理啊…

繼續 Lyric Get on Electron 的開發,現在的 js 開發都一定要有 livereload 功能啊,所以就找了一下 Electron,網路上是有許多不同的招式,大多是搭配既有的 livereload,這套名稱有 electron 就來試一下吧

https://github.com/Quramy/electron-connect
https://www.npmjs.com/package/electron-connect
Livereload tools for Electron development

需要搭配 gulp 來使用,是的,又一個 build system 啦

從 commit 可以看到,需要修改的地方

  • main.js
    需要 require electron-connect 進來,並且下 client.create(mainWindow)
  • index.html
    需要增加 script tag,require electron-connect 並下 client.create()
  • gulpfile.js
    當然還需要新增 gulpfile.js,直接複製 electron-connect 的範例,要注意的是把 gulp.watch 的檔名,改成對應的名稱,不然改了也不會偵測到啊
package.json 只是補 devDependencies 和 scripts 加一個

要注意的是,加了上述東西之後,electron 打包後的 app 執行會有 error 喔,因為原本會跑個 watch server process 起來,就沒有啦

electron-connect 的建議是,透過 gulp 把 script tag 移掉

只好先開個 dev branch,之後再來研究 gulp 寫法啊

沒有留言: