电子应用的实时重新加载答案

【问题标题】：Live reload for electron application电子应用的实时重新加载
【发布时间】：2015-08-07 08:56:54
【问题描述】：

我想使用 VScode + Gulp + Electron 的组合来构建应用程序。开发工作流程的一个不错的功能是在我的 Gulp 监视任务中添加一个实时重新加载任务，以便在每次更改时重新加载 Electron 应用程序。

任何想法如何实现这一目标？

非常感谢您的帮助。

【问题讨论】：

【解决方案1】：

我可以通过gulp-livereload 插件实现这一点。这是仅实时加载 CSS 的代码。其他一切都是一样的。

var gulp = require ('gulp'),
run = require('gulp-run'),
livereload = require('gulp-livereload'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
rimraf = require('gulp-rimraf');

var cssSources = [
  'app/components/css/main.css',
];

gulp.task('css', function(){
  gulp.src(cssSources)
  .pipe(concat('main.css'))
  .pipe(autoprefixer({browsers: ['last 2 versions', 'ie 10']}))
  .pipe(gulp.dest('app/public/styles'))
  .pipe(rename({suffix: '.min'}))
  .pipe(minifycss())
  .pipe(gulp.dest('app/public/styles'))
  .pipe(livereload());
})

gulp.task('watch', function(){
  livereload.listen();
  gulp.watch(cssSources, ['css'])
})

gulp.task('run', ['build'], function() {
  return run('electron .').exec();
});

gulp.task('default', ['watch', 'run']);

桌面应用程序中的 Livereload 非常棒。

确保添加

<script src="http://localhost:35729/livereload.js"></script>

到你的 index.html

【讨论】：

感谢您的意见。没有让它工作。 gulp live reload 任务正在触发，但电子应用程序没有响应。我还需要添加一些东西吗？
好的，知道了。缺少的部分是添加<script src="http://localhost:35729/livereload.js"></script> 标签。此外，无需在包含电子应用程序的目录中添加gulpfile.js。如果您愿意添加此信息，我会将其标记为解决方案。感谢您的帮助。
从 gulp 4.0 开始，任务不是以数组形式传递，而是通过函数 gulp.series();作为串行，它会阻止手表并且从不发射电子。您能否修改您的代码以解决此问题？

【解决方案2】：

尽管这已被回答/接受，但值得一提的是，我也设法让它与 electron-connect 一起工作

【讨论】：

【解决方案3】：

还有一种方法可以使用 gulp-webserver（我遇到这篇文章的原因），并且不需要 gulp-livereload。忽略 react-generator，它是一个单独的任务，可以进行我的反应转换。不用说，这个任务启动网络服务器，监视变化，运行生成器，然后重新加载这些变化。

var gulp    = require('gulp'),
electron    = require('electron-prebuilt'),
webserver   = require('gulp-webserver'),

  gulp.task(
  'run',
  ['react-generator'], // Secondary task, not needed for live-reloading
  function () {
    gulp.watch('./app/react/*.jsx', ['react-generator']);
    gulp.src('app')
      .pipe(webserver({
         port: 8123,
         fallback: "index.html",
         host: "localhost",
         livereload: {
           enable: true,
           filter: function(fileName) {
             if (fileName.match(/.map$/)) {
               return false;
             } else {
               return true;
             }
           }
         },
      }));
});

如上一个答案所述，您需要将以下内容添加到您的索引文件中，否则它会表现得好像它不适用于 Electron，但适用于浏览器。

<script src="http://localhost:35729/livereload.js"></script>

【讨论】：

【解决方案4】：

不是专门针对 Gulp，但有一个简单的 Electron 插件专门用于此目的（在进行更改后重新加载应用程序）：electron-reload

只需添加包：

$ npm install electron-reload --save-dev

并且将以下行添加到 /main.js 文件的顶部：

require('electron-reload')(__dirname)

【讨论】：

【解决方案5】：

我找到的最简单的方法是使用electron-reloader，安装后，只需将以下代码粘贴到应用入口文件的顶部（通常命名为main.js），就大功告成了：

const { app } = require('electron')

app.isPackaged || require('electron-reloader')(module)

【讨论】：