# 4.调式Electron应用

安装 , 主进程自动刷新

npm i nodemon -D
1

修改package.json

  "scripts": {
    "start": "electron .",
    "hot": "nodemon main.js --exec electron ."
  },
1
2
3
4

执行

npm run hot
1

监听html刷新, js刷新

npm i electron-connect --save-dev
1

安装gulp

cnpm i -D gulp
1

添加gulpfile文件

const { series, watch, task} = require('gulp')
const electron = require('electron-connect').server.create()

// series串行执行gulp任务, watch 监听文件的变化
task('serve', function(cb) {
    // console.log('gulp is running')
    electron.start(() => {
        watch('main.js', electron.restart);
        watch(['*.js','*.html'], electron.reload);
    })
    cb()
})

exports.default = series('serve')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

添加index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        require('electron-connect').client.create()
    </script>
</head>
<body>
    hellow world!!!
    星城哈哈
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

执行

npx gulp
1
上次更新: 2021/2/21 下午7:52:17