gulp - electron アプリケーションのライブリロード

Question

VScode + Gulp + Electron を組み合わせてアプリケーションを構築したいと考えています。開発ワークフローの優れた機能は、Gulp ウォッチ タスクにライブ リロード タスクを追加して、変更のたびに Electron アプリケーションをリロードすることです。

これを達成する方法はありますか？

あなたの助けは非常に高く評価されています。

Answer 1

gulp-livereload私はプラグインでこれを達成することができました。CSSのみをライブリロードするコードは次のとおりです。それは他のすべてについても同じです。

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 は素晴らしいです。

必ず追加してください

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

あなたのindex.htmlに

Answer 2

これはすでに回答/承認されていますが、言及する価値はありますが、電子接続で動作させることもできました