browsersync gulp 代理不适用于 wordpress get_template_path

Question

我有一个奇怪的问题。我对我的 wp 项目使用浏览器同步和 gulp，然后出现了奇怪的事情。我使用 gulp 服务任务：

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

和一些 gulp 替换我的主题的 wiredep 任务，使它像 wp 一样：

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

这导致我的 footer.php 文件上的 html 标记如下：

<!-- 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 -->

当我运行 gulp 服务时，我看到我的输出 html 文件是这样的：

<!-- 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 -->

知道为什么 foundation 已经通过 http://localhost:8888 加载了吗？我试过 gulp 清除缓存，但没有成功。我还尝试更改 bower_components 的顺序，看起来第 6 个组件的路径总是与其他组件不同。

Answer 1

这是一个浏览器同步问题，已在 2.8.0 版中解决。我已经更新，现在可以正常使用了！

browsersync gulp 代理不适用于 wordpress get_template_path

browsersync gulp proxing doesnt work well with wordpress get_template_path

gulp

gulp-watch

browser-sync