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

问题描述

我想使用VScode + Gulp + Electron的组合来构建应用程序。开发工作流程的一个很好的功能是将实时重新加载任务添加到我的Gulp监视任务中，以在每次更改时重新加载Electron应用程序。

任何想法如何实现此目标？

您的帮助非常感谢。

解决方案

我能够通过 gulp-livereload 插件。以下是仅用于重新生成CSS的代码。

$ b

  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'，
]; 
 $ b $ gulp.task（'css'，function（）{
 gulp.src（cssSources）
 .pipe（concat（'main.css'））
如果你想使用这个功能，你可以使用它来创建一个新的应用程序。重命名（{后缀：'.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非常棒。

<请确保您添加

 < script src =http：// localhost：35729 / livereload.js> < /脚本> 
  

到您的index.html

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?

Your help is highly appreciated.

解决方案

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 in a desktop application is awesome.

Make sure you add

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

to your index.html

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