使用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安裝，程序會自動刪除以前的應用，安裝最新版本。