使用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，戳

http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/  或者  http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

再安装grunt  http://www.gruntjs.NET/getting-started

在项目目录里面输入，注意是项目目录 

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安装，程序会自动删除之前的应用，安装最新版本。