【Electron】 使用Grunt打包Electron,生成exe的安装包

上一篇文章【Electron】 Electron 开发桌面应用（一） 编写→运行→打包 我们已经得到了electron打包好的应用了，目录如下，但是我们如何整合成一个安装程序，发给客户使用呢？

我们可以使用grunt-electron-installer来生成

一. 准备

    安装grunt-electron-installer。

    1. 我们进入到HelloWorld-win32-x64的父级目录下。

    2. 新建一个package.json，内容如下：

{
  "name": "HelloWorld",
  "version": "1.0.0"  
}

    3. 打开命令行，输入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

    执行完之后，我们的目录结构如下：

    

    我们的package.json文件内容更改为：

{
  "name": "HelloWorld",
  "version": "1.0.0",
  "devDependencies": {
    "grunt-electron-installer": "^2.1.0"
  }
}

    5.这个时候我们新建Gruntfile.js文件，内容如下：

var grunt = require("grunt");
grunt.config.init({
    pkg: grunt.file.readJSON('package.json'),
    'create-windows-installer': {
        x64: {
            appDirectory: './HelloWorld-win32-x64',
            authors: 'mickey.',
            exe: 'HelloWorld.exe',
            description:"hello",
        }       
    }
})

grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);

    关于Gruntfile.js一些配置信息如下：

    注：如要设置图标iconUrl，图标必须是网络连接，不能是路径

           应用图标iconUrl和安装程序的图标setupIcon都必须是ico格式的文件，不能为其他。我们可以在下面链接进行图片的格式转换

            http://www.bitbug.net/

Config Name	Required	Description
appDirectory	Yes	Electron App 的目录
outputDirectory	No	输出exe的目录. 默认生成在installer目录.
loadingGif	No	安装过程中的加载动画图片.
authors	Yes	作者,若未指明，则从应用的package.json文件中读取
owners	No	应用拥有者，若未定义则与作者相同.
exe	No	应用的入口exe名称.
description	No	应用描述
version	No	应用版本号.
title	No	应用的标题.
certificateFile	No	证书文件
certificatePassword	No	加密密钥
signWithParams	No	传递给signtool签名工具的参数，如果软件不签名，可以忽略这个
iconUrl	No	应用图标链接，默认是Atom的图标.
setupIcon	No	Setup.exe 的icon
noMsi	No	是否创建.msi安装文件?
remoteReleases	No	更新链接，如果填写，当链接中有新版本，会自动下载安装。

二. 打包

    准备工作都完成之后，HelloWorld-win32-x64的父级目录如下，我们在执行grunt就可以了（执行中，最好退出360等软件，可能会造成干扰）。

    

    

grunt

三. 完成

    在目录下，会生成一个installer的文件夹，如下：

    setup.exe就是安装程序了。

    

安装成功之后：

四. 生成桌面快捷方式

    添加监听并生成快捷方式

    我们需要打开上一篇文章【Electron】 Electron 开发桌面应用（一） 编写→运行→打包中最开始main.js添加如下代码：

//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;
}

添加之后重新执行npm run-script package得到HelloWorld目录

在重新执行上面的步骤得到setup.exe

这次我们在重新安装，会有一个默认的安装等待动画：

安装成功之后，桌面生成了我们的快捷方式

安装程序的路径在我们C盘appdata下面

控制面板中有了我们的应用程序

NSIS打包方法可以查看链接： NSIS 打包 Electron 生成exe安装包