我想使用VScode + Gulp + Electron的组合来构建一个应用程序。开发工作流的一个很好的特性是在我的Gulp监视任务中添加一个实时重新加载任务,以便在每次更改时重新加载电子应用程序。你知道如何做到这一点吗?非常感谢你的帮助。
sulc1iza1#
我可以用gulp-livereload插件来实现这一点。这里是livereload CSS的代码。其他的都一样。
gulp-livereload
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
eeq64g8w2#
尽管这个问题已经得到了回答/接受,但值得一提的是,我还设法让它与electron-connect一起工作
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,但适用于浏览器。
dohp0rv54#
不是特别与Gulp,但有一个简单的电子插件意味着只是(重新加载一个应用程序后,改变已作出):electron-reload只需添加软件包:
$ npm install electron-reload --save-dev
然后将以下行添加到/main. js文件的顶部:
require('electron-reload')(__dirname)
nhaq1z215#
我发现的最简单的方法是使用electron-reloader,安装后,只需将以下代码粘贴到应用入口文件(通常名为main.js)的顶部,一切就都准备好了:
main.js
const { app } = require('electron') app.isPackaged || require('electron-reloader')(module)
5条答案
按热度按时间sulc1iza1#
我可以用
gulp-livereload
插件来实现这一点。这里是livereload CSS的代码。其他的都一样。Livereload在桌面应用程序是令人敬畏的。
确保添加
到您的index.html
eeq64g8w2#
尽管这个问题已经得到了回答/接受,但值得一提的是,我还设法让它与electron-connect一起工作
zbq4xfa03#
还有一种方法是使用gulp-webserver(我看到这篇文章的原因),并且不需要gulp-livereload。忽略react-generator,它是一个独立的任务,负责我的react转换。不用说,这个任务启动webserver,监视更改,运行生成器,然后重新加载这些更改。
正如前面的答案所指出的,您需要将以下内容添加到索引文件中,否则它会表现得好像不适用于Electron,但适用于浏览器。
dohp0rv54#
不是特别与Gulp,但有一个简单的电子插件意味着只是(重新加载一个应用程序后,改变已作出):electron-reload
只需添加软件包:
然后将以下行添加到/main. js文件的顶部:
nhaq1z215#
我发现的最简单的方法是使用electron-reloader,安装后,只需将以下代码粘贴到应用入口文件(通常名为
main.js
)的顶部,一切就都准备好了: