it-swarm.com.ru

Прямая перезагрузка для электронного приложения

Я хочу использовать комбинацию VScode + Gulp + Electron для создания приложения. Приятной особенностью рабочего процесса разработки было бы добавление задачи живой перезагрузки к моей задаче наблюдения Gulp, чтобы перезагрузить приложение Electron при каждом изменении.

Есть идеи как этого добиться?

Ваша помощь высоко ценится.

11
Christian Karl Bernasko

Я смог добиться этого с помощью плагина 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

12
CodeManiak

Несмотря на то, что на этот вопрос уже был получен ответ, стоит упомянуть, что мне также удалось заставить его работать с electronic-connect

11
Alex Weber

Есть также способ сделать это с помощью gulp-webserver (причина, по которой я наткнулся на этот пост), и не требует gulp-livereload. Проигнорируйте генератор реакции, который является отдельной задачей, которая выполняет мои реакции преобразования. Нет необходимости говорить, что эта задача запускает веб-сервер, отслеживает изменения, запускает генератор и затем перезагружает эти изменения.

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

Как отмечалось в предыдущем ответе, вам нужно добавить следующее в индексный файл, иначе он будет действовать так, как будто он не работает для Electron, но работает для браузеров.

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

Не специально для Gulp, но есть простой плагин Electron, предназначенный именно для этого (перезагрузка приложения после внесения изменений): электронная перезагрузка

Просто добавьте пакет:

$ npm install electron-reload --save-dev

И добавьте следующую строку в начало файла /main.js:

require('electron-reload')(__dirname)
0
Emilien