Tải lại trực tiếp cho ứng dụng điện tử

Question

Tôi muốn sử dụng kết hợp VScode + Gulp + Electron để tạo ứng dụng. Một tính năng tốt đẹp của công việc phát triển sẽ là thêm một nhiệm vụ tải lại trực tiếp vào nhiệm vụ xem Gulp của tôi, để tải lại ứng dụng Electron trên mọi thay đổi.

Bất kỳ ý tưởng nào để đạt được điều này?

Trợ giúp của bạn được đánh giá cao.

Answer 1

Tôi có thể đạt được điều này với plugin gulp-livereload. Đây là mã để tải CSS chỉ CSS. Nó cũng tương tự cho mọi thứ khác.

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

Tải trọng gan trong ứng dụng dành cho máy tính để bàn thật tuyệt vời.

Hãy chắc chắn rằng bạn thêm

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

để index.html của bạn

Answer 2

Mặc dù đây đã được trả lời/chấp nhận, đáng nói Tôi cũng cố gắng làm cho nó làm việc với electron-connect

Answer 3

Ngoài ra còn có một cách để làm điều này bằng cách sử dụng gulp-webserver (Lý do tôi chạy qua bài đăng này), và không yêu cầu gulp-ganeload. Bỏ qua bộ tạo phản ứng là một nhiệm vụ riêng biệt mà phản ứng của tôi biến đổi. Không cần phải nói, nhiệm vụ này khởi động máy chủ web, đồng hồ để thay đổi, chạy trình tạo và sau đó tải lại các thay đổi đó.

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

Như đã lưu ý trong câu trả lời trước, bạn sẽ cần thêm phần sau vào tệp chỉ mục của mình hoặc hoạt động giống như nó không hoạt động cho Electron, nhưng cho trình duyệt.

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