Przeładowanie na żywo dla aplikacji elektronowej

Question

Chcę użyć kombinacji VScode + Gulp + Electron do zbudowania aplikacji. Dobrą cechą obiegu prac rozwojowych byłoby dodanie zadania do przeładowania na żywo do mojego zadania zegarka Gulp, aby przeładować aplikację elektronów przy każdej zmianie.

Każdy pomysł, jak to osiągnąć?

Twoja pomoc jest bardzo cenna.

Answer 1

Udało mi się to osiągnąć za pomocą wtyczki gulp-livereload. Oto kod do przeżycia, aby załadować TYLKO CSS. Tak samo jest ze wszystkim innym.

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 w aplikacji na komputer jest świetny.

Upewnij się dodać

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

do index.html

Answer 2

Mimo to już odpowiedział/przyjęte, warto wspomnieć, mam również udało się uzyskać go pracy z electron-connect

Answer 3

Istnieje również sposób, aby to zrobić za pomocą gulp-webserver (Powód, przez który przebiegł ten post), i nie wymaga aktualizacji live-gulp. Zignoruj ​​generator-reakcję, który jest osobnym zadaniem, które przetwarza moja reakcja. Nie trzeba dodawać, że to zadanie uruchamia serwer WWW, obserwuje zmiany, uruchamia generator, a następnie ponownie ładuje te zmiany.

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

Jak wspomniano w poprzedniej odpowiedzi, trzeba będzie dodać następujące wpisy do pliku indeksu, czy będzie to działać jak to nie działa dla elektronów, ale nie dla przeglądarek.

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