browsersync gulp proxing doesnt work well with wordpress get_template_path

Question

I have a strange problem. I use browser sync and gulp for my wp-project and strange thing appears. I use gulp serve task:

gulp.task('serve', ['styles'], function() {
    browserSync.init(null, {
        proxy : localhost:8888/mywpsite,
        debugInfo: true,
        open: true
    });
});

and some gulp replace in wiredep task for my theme to make it wp like:

gulp.task('wiredep', function() {
    var wiredep = require('wiredep').stream;
    gulp.src('**/*.php')
      .pipe(wiredep({
          directory: 'bower_components'
      }))
      .pipe(replace(/(<script src=")(bower_components\/)/g, '$1<?php echo get_template_directory_uri(); ?>/$2'))
      .pipe(gulp.dest(''));
});

this result in html markup on my footer.php file like this:

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/modernizr/modernizr.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/jquery/dist/jquery.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/fastclick/lib/fastclick.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/foundation/js/foundation.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/snap.svg/dist/snap.svg-min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/bower_components/waypoints/lib/jquery.waypoints.js"></script>
<!-- endbower -->
<!-- endbuild -->

when I run gulp serve I see my output html file like this:

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/modernizr/modernizr.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/jquery/dist/jquery.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/fastclick/lib/fastclick.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="http://localhost:8888/mywpsite/wp-content/themes/konstrukt/bower_components/foundation/js/foundation.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/snap.svg/dist/snap.svg-min.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="//localhost:3000/mywpsite/wp-content/themes/konstrukt/bower_components/waypoints/lib/jquery.waypoints.js"></script>
<!-- endbower -->
<!-- endbuild -->

Any ideas why foundation has been lodaed via http://localhost:8888 ? I've tried gulp clear cache but no luck with that. I've also tried to change order of bower_components and it appears that 6th component has always different path than the others.

Answer 1

This was a browser-sync issue, and it has been resolved with version 2.8.0. I've updated and now it works fine!