电子应用的实时重新加载 [英] Live reload for electron application

问题描述

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

I want to use a combination of VScode + Gulp + Electron to build an application. A nice feature of the development workflow would be to add an live reload task to my Gulp watch task, to reload the Electron application on every change.

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

Any Idea how to achieve this?

非常感谢您的帮助.

推荐答案

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

I was able to achieve this with the gulp-livereload plugin. Here is the code to livereload CSS ONLY. It's the same for everything else though.

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 非常棒.

Livereload in a desktop application is awesome.

确保添加

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

到你的 index.html

to your index.html

这篇关于电子应用的实时重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！