gulp-livereload with vagrant environment:livereload.js无法访问

Question

我在流浪环境中使用gulp-livereload时遇到问题（使用 puphpet 生成）。我的电脑是 Windows 主机，VM 是 Debian。

我使用这个gulpfile：

var gulp       = require('gulp'),
    less       = require('gulp-less')
    lr         = require('tiny-lr'),
    livereload = require('gulp-livereload'),
    server     = lr()
;
gulp.task('less', function () {
    gulp.src('assets/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('build/css'))
        .pipe(livereload(server))
    ;
});
gulp.task('watch', function() {
    gulp.watch('assets/less/*.less', ['less']);
    livereload.listen(35729, function(err){
        if(err) return console.log(err);
    });
});
gulp.task('default', ['watch', 'less']);

当Chrome扩展程序添加神奇的JS文件时，我会收到此消息：

无法加载资源：净：：ERR_CONNECTION_TIMED_OUT http://markup.dev:35729/livereload.js?ext=Chrome&extver=0.0.5

但是在我的 VM 中，如果我运行以下命令行，我会得到它

wget http://localhost:35729/livereload.js?ext=Chrome&extver=0.0.5

Answer 1

我没有足够的信息来确定，但我猜你的问题是你试图从主机访问页面，但 livereload 端口没有转发（VM 有自己的 IP 地址，可以将 vagrant 配置为将某些端口转发到主机，以便它们"看起来"在主机上是本地的）。

尝试将以下行添加到您的Vagrantfile：

config.vm.network "forwarded_port", guest: 35729, host: 35729

（有关文档，请参阅：https://docs.vagrantup.com/v2/networking/forwarded_ports.html）

或者，如果直接命中 VM（即已markup.dev映射到来宾的 IP），则可能需要验证 VM 上是否未配置防火墙，该防火墙可能会阻止实时加载端口进行外部访问。

Answer 2

就我而言，端口转发自动工作。但是，我必须将 VM 的 IP 指定为主机：

livereload.listen({
    host: '192.168.33.10'
});

更新：传递null也有效：

livereload.listen({
    host: null
});

我猜底层 http 服务器在显式传递'localhost'时的行为不同。