Electron入门——配置热更新,编辑代码实时自动刷新

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GISuuser/article/details/86685510

使用node.js做过vue或者ES6开发的人都知道,编辑代码后能自动刷新比自己每次都手动cmd窗口敲命令强多了。刚刚入门Electron开发,看网上这方面的资料比较少,参考了一下,自己配置一下,主要依赖于gulp监测文件变化实现。

先安装模块

npm install gulp --save
npm install electron-connect -save

在项目内创建gulpfile.js文件

注意监测文件的路径配置

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

gulp.task('watch:electron', function () {
    electron.start();
    gulp.watch(['./index.js'], electron.restart);
    gulp.watch(['./ui/**/*.{js,css},./ui/index.html'], electron.reload);
});

修改package.json文件

在文件中添加脚本命令

"scripts": {
    "hot":".\\node_modules\\.bin\\gulp watch:electron"
  },

修改主进程文件

const { app, Menu ,BrowserWindow} = require('electron');
const client = require('electron-connect').client;

// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
let mainWindow = null;

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function () {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        width: 800, height: 600,
        webPreferences: {
            nodeIntegrationInWorker: true//支持多线程
        }
    });
    // 加载应用的 index.html
    mainWindow.loadURL('file://' + __dirname + '/ui/index.html');

    // 打开开发工具
    mainWindow.openDevTools();

    // 当 window 被关闭,这个事件会被发出
    mainWindow.on('closed', function () {
        // 取消引用 window 对象,如果你的应用支持多窗口的话,
        // 通常会把多个 window 对象存放在一个数组里面,
        // 但这次不是。
        mainWindow = null;
    });
    client.create(mainWindow);
});

修改渲染进程文件

在index.html文件中添加

 //创建 client
    require('electron-connect').client.create();

使用npm run hot即可运行项目

结果

经测试,修改主进程文件,后自动重启窗体;修改html、css文件存在无效的情况,可以使用ctrl+r快捷键刷新

本文参考了https://segmentfault.com/a/1190000006186553

展开阅读全文

没有更多推荐了,返回首页