使用Grunt 插件打包Electron Windows应用
最近利用Electron来创建跨桌面应用的趋势似乎很火。看了几个用Electron开发的应用,这些应用在windows下面的安装方式,都是类似一个绿色软件的安装方法,下载.zip->解压到相应目录->进入文件夹点击exe使用。这种安装方法有两个缺点,第一,更新繁琐,用户需要删除之前的软件目录,下载新的软件,在跑一遍解压流程,不然电脑里面就会出现两个软件,不好区分。第二,安装之后无法自动创建快捷方式,需要手动进入目录右键创建。第三,没有自定的图标跟名称,没有那么酷了有木有!
之前我的文章Electron实战:创建基于ELectron开发的window应用安装包 已经解决了以上问题,但是过程比较复杂繁琐,适合喜欢折腾的人。
最近发现了一个打包利器 grunt-electron-installer ,这是一个利用Squirrel的打包插件,不仅解决了传统打包方式的缺点,比起我前一篇文章推荐的打包方法,使用起来实在是方便很多,简直解放了生产力!所以忍不住安利给大家。
以下是流程
1.常规打包
把我们开发好的应用放进electron文件夹里面,图中是kaka.exe ,原来为electron.exe,是使用Resource Hacker改了名字跟图标的,具体方法查看 Electron实战:创建基于ELectron开发的window应用安装包 中的 “创建自定义安装包”,部分,具体不再赘述。
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配置:
4.监听Squirrel事件
监听的目的主要是为了在安装之后自动创建App快捷方式,还有为之后的自动更新做准备。因为我们的.exe会在安装之后自动打开程序,所以我在程序的入口main.js,添加sqruieel事件的监听就好了,我顺便把程序卸载时,删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听。如下图:
5.开始创建安装包
在根目录运行 grunt ,
如果第二步中,没有把任务设置为默认,需要输入 grunt create-windows-installer 。
6.更新
最新的App打包方法同上,唯一的不同就是在第二步的配置中,修改Version配置字段,写入最新版本号,发布打包之后的setup.exe,用户通过执行setip.exe安装,程序会自动删除之前的应用,安装最新版本。