使用Grunt 插件打包Electron Windows应用

时间:2023-03-08 16:43:49

最近利用Electron来创建跨桌面应用的趋势似乎很火。看了几个用Electron开发的应用,这些应用在windows下面的安装方式,都是类似一个绿色软件的安装方法,下载.zip->解压到相应目录->进入文件夹点击exe使用。这种安装方法有两个缺点,第一,更新繁琐,用户需要删除之前的软件目录,下载新的软件,在跑一遍解压流程,不然电脑里面就会出现两个软件,不好区分。第二,安装之后无法自动创建快捷方式,需要手动进入目录右键创建。第三,没有自定的图标跟名称,没有那么酷了有木有!

之前我的文章Electron实战:创建基于ELectron开发的window应用安装包 已经解决了以上问题,但是过程比较复杂繁琐,适合喜欢折腾的人。

最近发现了一个打包利器 grunt-electron-installer ,这是一个利用Squirrel的打包插件,不仅解决了传统打包方式的缺点,比起我前一篇文章推荐的打包方法,使用起来实在是方便很多,简直解放了生产力!所以忍不住安利给大家。

以下是流程

1.常规打包

把我们开发好的应用放进electron文件夹里面,图中是kaka.exe ,原来为electron.exe,是使用Resource Hacker改了名字跟图标的,具体方法查看 Electron实战:创建基于ELectron开发的window应用安装包 中的 “创建自定义安装包”,部分,具体不再赘述。

使用Grunt 插件打包Electron Windows应用

2.安装grunt-electron-installer

Npm大法好,在项目目录里面输入

npm install --save-dev grunt-electron-installer

3.配置

在项目根目录新建Gruntfile.js,我们需要在这里进行grunt.config的配置,配置规则基本nuget打包工作的Package.nuspec相同配置规则是:

配置字段

是否必填

描述

appDirectory

Electron App 的目录

outputDirectory

最后输出exe的目录

loadingGif

安装过程中的加载图片

authors

作者

owners

所有者

exe

App入口的exe ,如果改了名字的需要填写

description

App描述

version

版本号

title

标题,默认是App 名称

certificateFile

证书文件

certificatePassword

加密密钥

signWithParams

传递给signtool签名工具的参数,如果软件不签名,可以忽略这个。

iconUrl

Icon链接,需要自定义icon的时候需要

setupIcon

Setup.exe 的icon

noMsi

不需要创建.msi安装文件

remoteReleases

更新链接,如果填写,当链接中有新版本,会自动下载安装。

以下是我的Gruntfile.js配置:

使用Grunt 插件打包Electron Windows应用

4.监听Squirrel事件

监听的目的主要是为了在安装之后自动创建App快捷方式,还有为之后的自动更新做准备。因为我们的.exe会在安装之后自动打开程序,所以我在程序的入口main.js,添加sqruieel事件的监听就好了,我顺便把程序卸载时,删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听。如下图:

使用Grunt 插件打包Electron Windows应用

5.开始创建安装包

在根目录运行 grunt  ,

如果第二步中,没有把任务设置为默认,需要输入 grunt create-windows-installer 。

使用Grunt 插件打包Electron Windows应用

6.更新

最新的App打包方法同上,唯一的不同就是在第二步的配置中,修改Version配置字段,写入最新版本号,发布打包之后的setup.exe,用户通过执行setip.exe安装,程序会自动删除之前的应用,安装最新版本。