Live ricarica per l'applicazione di elettroni

Question

Desidero utilizzare una combinazione di VScode + Gulp + Electron per creare un'applicazione. Una buona caratteristica del flusso di lavoro di sviluppo sarebbe quella di aggiungere un'attività di ricarica live alla mia attività di Gulp Watch, per ricaricare l'applicazione Electron ad ogni cambio.

Qualche idea su come raggiungere questo obiettivo?

Il vostro aiuto è molto apprezzato.

Answer 1

Sono riuscito a ottenere ciò con il plug-in gulp-livereload. Ecco il codice per caricare il CSS SOLO. È lo stesso per tutto il resto però.

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 in un'applicazione desktop è impressionante.

Assicurati di aggiungere

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

al vostro index.html

Answer 2

Anche se questo è già stato risposto/accettata, vale la pena menzionare ho anche riuscito a farlo funzionare con electron-connect

Answer 3

C'è anche un modo per farlo usando il gulp-webserver (Il motivo per cui ho trovato questo post), e non richiede il gulp-livereload. Ignora il generatore di reazione, che è un'attività separata che trasforma la mia reazione. Inutile dire che questa attività avvia il webserver, controlla le modifiche, avvia il generatore e quindi ricarica le modifiche.

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

Come indicato nella risposta precedente, è necessario aggiungere il seguente al file di indice, o si comporterà come se non funziona per Electron, ma lo fa per i browser.

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