我想使用VScode + Gulp + Electron的组合来构建应用程序。开发工作流程的一个很好的功能是在我的Gulp监视任务中添加一个实时重新加载任务,以便在每次更改时重新加载Electron应用程序。
任何想法如何实现这一目标?
非常感谢您的帮助。
答案 0 :(得分:12)
我能够通过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
答案 1 :(得分:11)
虽然这已经得到了回答/接受,但值得一提的是我也设法让它与electron-connect
一起工作答案 2 :(得分:2)
还有一种方法可以使用gulp-webserver(我在这篇文章中遇到的原因)来做到这一点,并且不需要gulp-livereload。忽略反应生成器,这是一个单独的任务,我的反应变换。不用说,此任务启动Web服务器,监视更改,运行生成器,然后重新加载这些更改。
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>
答案 3 :(得分:0)
并非专门针对Gulp,但有一个简单的Electron插件就是为了那个(在更改后重新加载应用程序):electron-reload
只需添加包:
$ npm install electron-reload --save-dev
并将以下行添加到/main.js文件的顶部:
require('electron-reload')(__dirname)