Gulp 用于电子应用的带电钉仓

bvpmtnay  于 2022-12-08  发布在  Gulp
关注(0)|答案(5)|浏览(132)

我想使用VScode + Gulp + Electron的组合来构建一个应用程序。开发工作流的一个很好的特性是在我的Gulp监视任务中添加一个实时重新加载任务,以便在每次更改时重新加载电子应用程序。
你知道如何做到这一点吗?
非常感谢你的帮助。

sulc1iza

sulc1iza1#

我可以用gulp-livereload插件来实现这一点。这里是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

eeq64g8w

eeq64g8w2#

尽管这个问题已经得到了回答/接受,但值得一提的是,我还设法让它与electron-connect一起工作

zbq4xfa0

zbq4xfa03#

还有一种方法是使用gulp-webserver(我看到这篇文章的原因),并且不需要gulp-livereload。忽略react-generator,它是一个独立的任务,负责我的react转换。不用说,这个任务启动webserver,监视更改,运行生成器,然后重新加载这些更改。

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>
dohp0rv5

dohp0rv54#

不是特别与Gulp,但有一个简单的电子插件意味着只是(重新加载一个应用程序后,改变已作出):electron-reload
只需添加软件包:

$ npm install electron-reload --save-dev

然后将以下行添加到/main. js文件的顶部:

require('electron-reload')(__dirname)
nhaq1z21

nhaq1z215#

我发现的最简单的方法是使用electron-reloader,安装后,只需将以下代码粘贴到应用入口文件(通常名为main.js)的顶部,一切就都准备好了:

const { app } = require('electron')

app.isPackaged || require('electron-reloader')(module)

相关问题