从 Gulp 调用 Electron

Question

我有一个用 Electron 构建的应用程序。我正在尝试简化我的构建过程。例如，缩小一些代码。我的挑战是，我不确定如何从 Gulp 启动应用程序。目前，我有一个看起来像这样的任务：

gulp.task('run', function() {
  var runSequence = require('run-sequence');
  runSequence(['clean', 'copy-resources', 'copy-package'], function() {
    spawn('electron', ['tmp/index.js']);
  });
});

gulp.task('clean', function() {
  return del(['tmp' + '/**/*']);
});

gulp.task('copy-resources', function() {
  return gulp.src('src/resources/**/*.*')
    .pipe(gulp.dest('tmp/resources'))
  ;
});

gulp.task('copy-package', function() {
  return gulp.src('package.json')
    .pipe(gulp.dest('tmp'))
  ;
});

当我运行这样做时，就好像我遇到了竞争条件。当电子尝试启动我的应用程序时，我会收到以下错误之一：

The app provided is not a valid electron app, please read the docs on how to write one: {url}

Error: Cannot find module '/Users/me/project/tmp/index.js'

或此错误：

The app provided is not a valid electron app, please read the docs on how to write one: {url}

Error: Cannot find module 'electron'

在控制台window中，我有时会看到以下错误：

Error: ENOENT: no such file or directory, stat '/Users/me/project/tmp/resources/components/firebase/README.md'
    at Error (native)

再次重申，这些错误并非每次都会发生。但是，至少有一个上述错误（或另一个将要发生）。这让我觉得竞争条件正在发生。我可以在提到的目录中看到该文件。同时，如果我从命令行使用以下命令，我可以运行应用程序：

electron ./tmp/index.js

我不确定哪里出了问题。

Answer 1

您可以试试名为 electron-connect 的软件包。我最近出于同样的目的使用它，对我来说效果很好。

您只需设置一个 gulp 任务：

gulp.task('serve', function () {

  // Start browser process 
  electron.start();

  // Restart browser process 
  gulp.watch('app.js', electron.restart);

  // Reload renderer process 
  gulp.watch(['index.js', 'index.html'], electron.reload);
});

然后将客户端添加到...

带有脚本标签的渲染过程：

<script>require('electron-connect').client.create()</script>

或者主进程:

'use strict'; 
var app = require('electron').app;
var browser = require('electron').BrowserWindow;
var client = require('electron-connect').client;

app.on('ready', function () {
    var mainWindow = new browser({
        width: 400,
        height: 300
    });
    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    // Connect to server process 
    client.create(mainWindow); 
});

从 Gulp 调用 Electron

Calling Electron from Gulp

gulp

electron