使用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安装,程序会自动删除之前的应用,安装最新版本。
使用Grunt 插件打包Electron Windows应用的更多相关文章
- 【Electron】在 WSL2 中 打包 electron Linux 版本
[Electron]在 WSL2 中 打包 electron Linux 版本. 安装 WSL 我使用的是 Ubuntu 20.04.4 LTS 的版本. 安装 WSL 文档地址:https://do ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- node.js安装及grunt插件,如何进行脚本压缩
http://gruntjs.com/pluginshttp://gruntjs.com/getting-startedhttp://gruntjs.com/configuring-tasks#glo ...
- chrome下的Grunt插件断点调试——基于node-inspector
之前调试grunt插件时,都是通过人肉打log来调试.不仅效率低,而且会产生一堆无用的代码.于是简单google了下node断点调试的方法,总结了下. 借助node-inspector,我们可以通过C ...
- Grunt 插件使用汇总
最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2 ...
- 如何开发 Grunt 插件
创建 grunt 插件 准备工作:(node/npm/git 安装,在此不做赘述) yeoman generator 可以自动生成一个插件模板. 安装 yo npm install -g yo 安装 ...
- 微软开放技术发布开源 Jenkins 插件以将 Windows Azure Blob 服务用的开作存储库
发布于 2014-02-10 作者 陈 忠岳 持续集成 (CI) 的历史源远流长, 其宗旨在于软件团队在敏捷环境中不断将他们的工作整合为持续构建.管理 CI 进程的工具已存在一段时间.过去几年中 ...
- 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...
- grunt 插件
一个简单的 grunt 插件, 作用是 把 css 文件中的 /images/ 替换成指定的 url path, 以实现 图片 cdn 路劲改造 插件项目文件结构 grunt-contrib-s ...
随机推荐
- guess number
crossin的前面几章基本和LPTHW内容重合,因此我直接做了他前面的一个综合练习. 猜数游戏, 即系统随机记录一个数,根据用户猜的记录,如果正确则告知,且退出游戏,如不正确,则提示答案与用户输入的 ...
- The requested operation has failed apache
在安装apache后, 启动apache时提示The requested operation has failed错误: 通过一排除 cd apache 安装的Bin目录cmd如下秘密(双引号中的内容 ...
- 腾讯优测优分享 | Android性能测试工具化实现
腾讯优测专业的移动云测试平台,自动化测试提供性能测试数据,云真机实时输出性能数据,让测试更简单! 1.Android性能测试介绍 提到Android性能测试,我们总免不了俗地要首先介绍下Android ...
- 用canvas生成二维码
$("#actimg").qrcode({ render: "canvas", //设置渲染方式,有tabl ...
- node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...
- Codeforces Round #379 (Div. 2) A B C D 水 二分 模拟
A. Anton and Danik time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- MyEclipse使用前优化与配置
全局优化 1 设置默认编码方式 首选项> General > Workspace > GBK改成UTF-8 2 设置默认文件默认打开方式 首选项> General > ...
- iOS分析UI利器——Reveal及简单破解方法
Reveal作为分析APP UI的利器确实非常好用,用来查看任意UI布局也很方便 一.模拟器进行分析 1.打开Reveal(http://revealapp.com下载) 2.打开Xcode 3.Re ...
- JAVA hashmap知识整理
HashMap和Hashtable的比较是Java面试中的常见问题,用来考验程序员是否能够正确使用集合类以及是否可以随机应变使用多种思路解决问题.HashMap的工作原理.ArrayList与Vect ...
- R包之间冲突带来的奇怪错误
今天调试一个paper的代码,出现很奇怪的错误: qh2 <- mydf %>% filter(date >= as.Date('2013-08-14'),date <= as ...