Frage Live reload für die Elektronenanwendung


Ich möchte eine Kombination von VScode + Gulp + Electron verwenden, um eine Anwendung zu erstellen. Ein nettes Feature des Entwicklungs-Workflows wäre es, meinem Gulp-Watch-Task einen Live-Reload-Task hinzuzufügen, um die Electron-Anwendung bei jeder Änderung neu zu laden.

Irgendeine Idee, wie man das erreicht?

Deine Hilfe wird hoch geschätzt.


11
2018-05-25 20:42


Ursprung


Antworten:


Das konnte ich mit der gulp-livereload Plugin. Hier ist der Code, um CSS NUR live zu laden. Das Gleiche gilt für alles andere.

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']);

Liveload in einer Desktop-Anwendung ist großartig.

Stellen Sie sicher, dass Sie hinzufügen

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

zu deinem index.html


12
2018-05-26 17:30



Obwohl dies bereits beantwortet / akzeptiert wurde, habe ich es auch erwähnenswert gemacht, dass es funktioniert Elektron-Verbindung


11
2017-07-06 15:01



Es gibt auch eine Möglichkeit, dies mit dem gulp-Webserver zu tun (Der Grund, warum ich diesen Post durchgelaufen bin), und es ist kein Gulp-Liveload erforderlich. Ignoriere den Reaktionsgenerator, der eine separate Aufgabe ist, die meine Reaktion transformiert. Unnötig zu sagen, dass diese Aufgabe den Webserver startet, nach Änderungen Ausschau hält, den Generator startet und dann diese Änderungen neu lädt.

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;
             }
           }
         },
      }));
});

Wie in der vorherigen Antwort erwähnt, müssen Sie Ihrer Indexdatei Folgendes hinzufügen, oder es verhält sich so, als ob es nicht für Electron funktioniert, aber für Browser.

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

2
2018-01-15 23:59



Nicht speziell mit Gulp, aber es gibt ein einfaches Electron-Plugin, das nur dafür gedacht ist (Nachladen einer Anwendung, nachdem eine Änderung vorgenommen wurde): Elektron-Reload

Fügen Sie einfach das Paket hinzu:

$ npm install electron-reload --save-dev

Und fügen Sie die folgende Zeile am Anfang der Datei /main.js hinzu:

require('electron-reload')(__dirname)

0
2018-06-16 15:38