var gulp = require('gulp'); var platform = 'win32'; var arch = 'ia32'; var appPath = 'app'; var packageOutPath = 'production/package'; var iconPath = 'app/favicon.ico'; gulp.task('generate-package', () => { generatePackage(); }); function generatePackage(callback) { var packager = require('electron-packager') packager({ dir: appPath, platform: platform, arch: arch, out: packageOutPath, icon: iconPath, /*桌面快捷方式名称以及开始菜单文件夹名称*/ 'version-string': { CompanyName: 'MyCompany Inc.', ProductName: 'myapp' } }, function (err) { if (err) { console.log(err); } else { callback && callback(); } }); }
需要打包的时候，打开命令行：
gulp generate-package
这样做的好处是调用方便，当然我们也可以直接通过命令行调用electron-packager，前提是我们全局安装了它或者将其安装目录添加到了环境变量中:
更多参数一一加上即可。
贴上官方文档链接：
github链接：https://github.com/electron-userland/electron-packager
下面两个链接在上面的文档里面都能找到，但是个人感觉比较常用，还是贴出来：
参数使用：https://github.com/electron-userland/electron-packager/blob/master/usage.txt
脚本使用：https://github.com/electron-userland/electron-packager/blob/master/docs/api.md
打包
myapp下安装electron-winstaller：
npm install electron-winstaller --save-dev
还是在gulp里面添加一个task，连同package的代码一起贴上：
var gulp = require('gulp'); var platform = 'win32'; var arch = 'ia32'; var appPath = 'app'; var outName = 'myapp-win32-' + arch; var packageOutPath = 'production/package'; var installerOutPath = 'production/installer'; var packagePath = `${packageOutPath}/${outName}`; var installerPath = `${installerOutPath}/${outName}`; var iconPath = 'app/favicon.ico'; var gifPath = 'loading.gif'; gulp.task('generate-package', () => { generatePackage(); }); gulp.task('generate-installer', () => { isDirExist(packagePath, (exist) => { if (exist) { generateInstaller(); } else { generatePackage(() => { generateInstaller(); }); } }); }); function isDirExist(path, callback) { fs.readdir(path, (err) => { callback && callback(!err); }); } function generatePackage(callback) { var packager = require('electron-packager') packager({ dir: appPath, platform: platform, arch: arch, out: packageOutPath, icon: iconPath, /*桌面快捷方式名称以及开始菜单文件夹名称*/ 'version-string': { CompanyName: 'MyCompany Inc.', ProductName: 'myapp' } }, function (err) { if (err) { console.log(err); } else { callback && callback(); } }); } function generateInstaller() { var electronInstaller = require('electron-winstaller'); electronInstaller.createWindowsInstaller({ appDirectory: packagePath, outputDirectory: installerPath, loadingGif: gifPath, authors: 'ganyouyin', exe: 'myapp.exe', title: 'My APP', iconUrl: `${__dirname}/${iconPath}`, setupIcon: iconPath, setupExe: 'Setup.exe', noMsi: true }).then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`)); }
之后执行任务：
gulp generate-installer
第一次会非常慢，但是执行完成后我们的安装包就出来了。
此时我们的文件结构是：
myapp -GulpFile.js -package.json -node_modules -app -production -package -myapp-win32-ia32 - 各种文件，包含一个myapp.exe，双击可以直接运行 -installer -myapp-win32-ia32 -Setup.exe -RELEASES -myapp-1.0-full.nupkg
有了三个文件，将他们粘到之前的autoupdate-backend/releases/latest文件夹下面。
测试
启动我们的自动更新后台；
将myapp/app下的package.json里面的version改为1.1，再次打包；
将之前的autoupdate-backend中的latest文件夹重命名为1.0；
新建文件夹latest，将新打包产生的三个文件粘进去；
双击1.0里面的Setup.exe安装应用；
关闭应用，双击桌面上的快捷方式myapp.exe再次打开应用;
不出意外此时就会去进行自动更新的操作，结束后自动重启，再次打开时已经是1.1的应用。