使用原始URL而不是代理,使用浏览器同步

Question

最近从Grunt.js切换到Gulp.js,因为有多个人告诉我它有多好和多快(这是真的!).我已将BrowserSync添加到我的Gulpfile.js中,使其更容易在多个设备上进行测试.它工作得很好,设置简单.对于上下文,我在95%的工作时间内开发WordPress站点,并在启用了Multisite的Apache虚拟主机上运行它们,并为每个客户端设置了许多本地子域,例如site1.domain.dev,site2 .domain.dev等.这很好用,我已经这样做了几年了.但是,由于BrowserSync需要为我的站点创建代理,因此它能够同步并注入CSS,因此当前通过BrowserSync运行的站点将路由到http://localhost:3000.这很好,我理解为什么它需要发生,但它与WordPress有点混乱(因为URL不一样等),加上我是一个大的TypeKit/Cloud字体用户,这意味着因为该网站是被路由到localhost,没有加载任何字体.当然,我可以http://localhost:3000在TypeKit上添加每个站点的域名列表,但这感觉就像是一种解决方法,并且想知道是否有更好的方法来做到这一点.

我已经在我的Gulpfile.js的BrowserSync部分添加了:

gulp.task('serve', function() {
    browserSync({
        proxy: 'site1.domain.dev'
    });

    gulp.watch('assets/styles/source/**/*.scss', ['styles']);
    gulp.watch('*.php', reload);
    gulp.watch('assets/js/source/*.js', ['scripts']);
    gulp.watch('assets/js/plugins/**/*.js', ['plugins']);
});

所以我的问题是,BrowserSync是否可以直接转到我的URL(http://site1.domain.dev)而不是路由它http://localhost:3000？作为一个额外的好处,如果可以从BrowserSync代理属性中删除域,那将是非常棒的,因为我使用自动化脚本在我的WP Multisite安装上设置新站点,并且真的不想编辑我的gulpfile每次我建立一个新网站.

谢谢您的帮助!:)

Answer 1

对我来说,它通过指定host然后open: 'external'像这样工作:

browserSync.init({
  proxy: 'http://myproject.dev/',
  host: 'myproject.dev',
  open: 'external'
});

Answer 2

检查它是否对您有所帮助.我的gulpfile.js看起来像这样:

gulp.task('browser-sync', function () {
  browserSync({
    logPrefix: 'Your Project',
    host: 'site1.domain.dev',
    port: 3060,
    open: false,
    notify: false,
    ghost: false,

    // Change this property with files of your project
    // that you want to refresh the page on changes.
    files: [
      'public/css/**.min.css',
      'public/js/**.min.js',
      'app/**/*.php',
      'index.php',
      '.htaccess'
    ]
  });
});

运行Gulp之后,控制台将显示一段代码,您需要在之前将HTML放入HTML中</body>.browser-sync-client的版本和您使用的端口可能不同.注意:在代码中插入代码段后,仍会显示该消息.从BrowserSync的1.5.2版本,你可以禁用日志片断与logSnippet: false您的配置.

[Your Project] Copy the following snippet into your website, just before the closing </body> tag
<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

[Your Project] Access URLs:
----------------------------------
UI: http://localhost:3060
----------------------------------
UI External: http://site1.domain.dev:3060
----------------------------------
[Your Project] Watching files...

将生成的代码段插入文件后,保存文件并在浏览器中打开没有端口的地址http://site1.domain.dev.如果一切正确,该网站将更新来自的更改browserSync.files.

您可以添加验证,仅在开发环境中包含此代码段.例如,我在我的项目中使用PHP和CodeIgniter,因此,要仅包含在开发环境中,我这样做:

<?php
if (ENVIRONMENT === 'development') {
    $browserSync = rtrim(base_url(), '/') . ':3060/';
    $fileHeaders = @get_headers($browserSync);

    if ($fileHeaders) { ?>
        <script id="__bs_script__">
            document.write("<script async src='http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js'><\/script>".replace("HOST", location.hostname));
        </script>
    <?php }
} ?>

Answer 3

好问题 - 我也在使用WordPress并遇到类似的问题.BrowserSync网站上的文档并没有真正说明这一点,但我在BrowserSync UI的Overview页面上遇到了我的问题的解决方案,该页面运行在http:// localhost:3001 /.当您运行没有模式标志的BrowserSync时,会出现该消息--proxy.

如果您在结束</body>标记之前的某个位置粘贴此代码段

<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.6.1.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

例如,运行没有--proxy标志的BrowserSync

browser-sync start  --files "css/*.css"

它会以正常地址刷新您的网站.我打算将片段包装在一个条件中,以便它只包含在我的开发环境中 - 将来也许有些人可以写一个LiveReload风格的Chrome扩展来完成这项工作.不确定这是否适合您与Gulp的特定情况,但它适用于命令行.