Undefined links in WordPress

[stefthoen]

Hi @shakyShane,

Browser-sync looks awesome, but I'm having trouble getting it to work with WordPress and MAMP Pro. I configured a wpbs.dev vhost in MAMP and in my gulpfile I have the following settings:

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        proxy: "wpbs.dev"
    });
});

The site loads fine on wpbs.dev, but all the links to the assets (css, js, etc) and to other pages are broken. They all say something like this:

<link rel=undefined192.168.0.105:3005undefined />

While they should be saying something like this:

<link rel="alternate" type="application/rss+xml" title="WPBS &raquo; Feed" href="http://wpbs.dev/?feed=rss2" />

I looked through earlier issues, but didn't see any that looked like mine. I didn't try it with the Grunt plugin or the commandline app, so I'm not sure if it's specific to the Gulp plugin.

Do you have any idea what I'm doing wrong? Thanks!

[shakyShane]

This is a confirmed bug, thanks for reporting.

[stefthoen]

Is it WordPress and or Gulp specific? Any thoughts on when or if it will be fixed?

[shakyShane]

It's a problem in core. If you're desperate, you could open up 'node_modules/browser-sync/lib/proxy.js' and change the return value (starting on line 29) to this

 return {
            match: new RegExp(string, "g"),
            fn: function () {
                return proxyUrl;
            }
        };

That will work until I get a patch out

[stefthoen]

Thank you. I'll keep an eye out for the patch.

[shakyShane]

0.8.2 should fix this.

[stefthoen]

That's fast, thanks so much!

[shakyShane]

[schikulski]

Hi! I think I'm having a similar problem with the proxy function. Running this in my gulpfile.js:

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        proxy: "wp.gromf.dev"
    });
});

The browser opens up 192.168.0.100:3002 but it takes at least a minute or two for the server to load up the content, and the loading symbol in Chrome keeps spinning forever.

Tried changing the proxy.js file(as mentioned above), but with the same results.

Any thoughts?

Edit: Actually, the page stops loading after some time. But whenever I refresh the browser it takes forever to load again. Tested running browser-sync without gulp, same result, so I guess there's something up with the core.

[shakyShane]

Could you try setting host: "localhost" & let me know if that works.

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        proxy: "wp.gromf.dev",
        host: "localhost"
    });
});

[shakyShane]

or host: "127.0.0.1"

[schikulski]

That did work! But I doesn't seem like other devices can connect to browsersync when accessing my site through my.local.ip:3002. But the site shows up, though.

[shakyShane]

Can you copy & paste the console output of typing ifconfig (windows) or ipconfig on mac?

[iaakash]

gulp.task('browser-sync', function() { browserSync.init(null, { proxy: "odesk.keepsake", host: "localhost" }); });

Above is the browser-sync task snippet. It loads fine on Mac but on Chrome for Android it's not loading assets(css, js). Any Clue??