javascript - gulp-livereload with vagrant environment : livereload.js not accessible - Stack Overflow

admin管理员组

文章数量:1348124

I have a problem using gulp-livereload in my vagrant environment (generated with puphpet). My puter is a Windows Host, and the VM a Debian.

I use this 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']);

And when Chrome Extension add the magic JS file I obtain this message :

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT :35729/livereload.js?ext=Chrome&extver=0.0.5

But in my VM, if I run the following mand line, I get it

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

I have a problem using gulp-livereload in my vagrant environment (generated with puphpet). My puter is a Windows Host, and the VM a Debian.

I use this 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']);

And when Chrome Extension add the magic JS file I obtain this message :

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT http://markup.dev:35729/livereload.js?ext=Chrome&extver=0.0.5

But in my VM, if I run the following mand line, I get it

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

• javascript
• vagrant
• puphpet
• gulp-livereload

Share Improve this question Follow edited Nov 19, 2014 at 11:19 vurtupesz asked Nov 19, 2014 at 11:10 vurtupeszvurtupesz 6111 silver badge55 bronze badges 5

• Do you know that 'lr', 'livereload' and 'server' variables in your code are globals? – Kokozaurus Commented Nov 19, 2014 at 11:26
• Yes I know but I don't think that it's the problem – vurtupesz Commented Nov 19, 2014 at 11:28
• Yeah... although using globals is bad and unpredictable, I agree. That's why I didn't post an answer. – Kokozaurus Commented Nov 19, 2014 at 11:30
• Where is it getting markup.dev from? – Phil Commented Dec 2, 2014 at 0:21
• markup.dev is define in my host file, and hosted by the VM – vurtupesz Commented Dec 3, 2014 at 9:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8 +25

I don't have enough information to be certain, but I would guess that your problem is you are trying to access the page from the host, but the livereload port isn't forwarded (the VM has it's own IP address and vagrant can be configured to forward certain ports to the host so that they "appear" to be local on the host).

Try adding the following line to your Vagrantfile:

config.vmwork "forwarded_port", guest: 35729, host: 35729

(For documentation see: https://docs.vagrantup./v2/networking/forwarded_ports.html)

Alternatively if you are directly hitting the VM (that is you have markup.dev mapped to the guest's IP) it may be worth verifying that there is not a firewall configured on your VM which might block the livereload port from external access.

In my case, the port forwarding worked automagically. However, I had to specify the VM's IP as host:

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

Update: Passing null works, too:

livereload.listen({
    host: null
});

I guess that the underlying http server behaves differently when passing 'localhost' explicitly.

本文标签： javascriptgulplivereload with vagrant environmentlivereloadjs not accessibleStack Overflow