天天看點

Grunt打包Electron,生成exe的安裝包

在之前的部落格:3、electron打包生成exe檔案

我們已經得到了electron打包好的應用了,目錄如下,但是我們如何整合成一個安裝程式,發給客戶使用呢?

Grunt打包Electron,生成exe的安裝包

我們可以使用grunt-electron-installer來生成

一. 準備

    安裝grunt-electron-installer。

    1. 我們進入到HelloWorld-win32-x64的父級目錄下。

    2. 建立一個package.json,内容如下:

{
"name": "HelloWorld",
"version": "1.0.0" 
}      
Grunt打包Electron,生成exe的安裝包

3. 在上面的路徑下打開DOC視窗,打開指令行,輸入npm install grunt-electron-installer --save-dev安裝grunt-electron-installer子產品

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

    4.接着輸入npm install grunt --save-dev安裝grunt

npm install grunt --save-dev      
Grunt打包Electron,生成exe的安裝包

    執行完之後,我們的目錄結構如下:

Grunt打包Electron,生成exe的安裝包

在上面的目錄下建立Gruntfile.js檔案,内容如下:

  關于Gruntfile.js一些配置資訊如下:

    注:如要設定圖示iconUrl,圖示必須是網絡連接配接,不能是路徑

           應用圖示iconUrl和安裝程式的圖示setupIcon都必須是ico格式的檔案,不能為其他。我們可以在下面連結進行圖檔的格式轉換

            http://www.bitbug.net/

Grunt打包Electron,生成exe的安裝包

二. 配置生成桌面快捷方式

    配置app添加監聽并生成快捷方式

  找到我們應用程式index.js添加如下代碼:

Grunt打包Electron,生成exe的安裝包
//grunt 生成快捷方式
var path = require('path');
var handleStartupEvent = function () {
    if (process.platform !== 'win32') {
        return false;
    }

    var squirrelCommand = process.argv[1];

    switch (squirrelCommand) {
        case '--squirrel-install':
        case '--squirrel-updated':
            install();
            return true;
        case '--squirrel-uninstall':
            uninstall();
            app.quit();
            return true;
        case '--squirrel-obsolete':
            app.quit();
            return true;
    }
    // 安裝
    function install() {
        var cp = require('child_process');
        var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
        var target = path.basename(process.execPath);
        var child = cp.spawn(updateDotExe, ["--createShortcut", target], { detached: true });
        child.on('close', function(code) {
            app.quit();
        });
    }
    // 解除安裝
    function uninstall() {
        var cp = require('child_process');
        var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
        var target = path.basename(process.execPath);
        var child = cp.spawn(updateDotExe, ["--removeShortcut", target], { detached: true });
        child.on('close', function(code) {
            app.quit();
        });
    }

};

if (handleStartupEvent()) {
    return;
}      

添加之後在下面目錄打開DOS執行npm run-script package得到out目錄:

Grunt打包Electron,生成exe的安裝包
Grunt打包Electron,生成exe的安裝包

三. 打包

    準備工作都完成之後,HelloWorld-win32-x64的父級目錄如下,我們在執行grunt就可以了(執行中,最好退出360等軟體,可能會造成幹擾)。

報錯:

如果有的同學運作grunt報錯:

Grunt打包Electron,生成exe的安裝包

你需要先将Grunt指令行(CLI)安裝到全局環境中。

npm install -g grunt-cli 
      

上述指令執行完後,grunt 指令就被加入到你的系統路徑中了,以後就可以在任何目錄下執行此指令了。

Grunt打包Electron,生成exe的安裝包

   在目錄下,會生成一個installer的檔案夾,如下:

    setup.exe就是安裝程式了。

Grunt打包Electron,生成exe的安裝包
Grunt打包Electron,生成exe的安裝包