web-dev-qa-db-ja.com

browser-syncでプロキシではなく元のURLを使用する

最近、Grunt.jsからGulp.jsに切り替えました。複数の人が、それがどれほど良くて速くなったかを教えてくれたからです（本当です！）。 BrowserSync をGulpfile.jsに追加して、複数のデバイスでテストしやすくしました。うまく機能し、セットアップも簡単でした。コンテキストのために、作業時間の95％でWordPressサイトを開発し、マルチサイトを有効にしたApache仮想ホストでそれらを実行し、各クライアント（site1など）に多数のローカルサブドメインを設定します.domain.dev、site2.domain.devなど。これは非常にうまく機能し、私は数年前からこの方法でやっています。ただし、BrowserSyncはCSSを同期および挿入できるようにサイトにプロキシを作成する必要があるため、BrowserSyncを介して現在実行されているサイトはhttp://localhost:3000にルーティングされます。これは問題ありませんが、なぜ発生する必要があるのか​​は理解していますが、WordPressが少し混乱しています（URLが同じではないなど）。さらに、私はTypeKit/Cloudフォントの大ユーザーです。は、サイトがlocalhostにルーティングされるため、フォントがロードされないことを意味します。もちろん、TypeKitの各サイトのドメインのリストにhttp://localhost:3000を追加することもできますが、これは少しの回避策のように感じられ、それを行うより良い方法があるかどうか疑問に思っていました。

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がhttp://localhost:3000をルーティングする代わりに、私のURLに直接行くことができるでしょうか（ http://site1.domain.dev ） ？追加のボーナスとして、WPマルチサイトインストールに自動化スクリプトを使用して新しいサイトをセットアップするため、BrowserSyncプロキシプロパティからドメインを削除できれば素晴らしいでしょう。新しいサイトをセットアップするたびにgulpfileを編集する必要があります。

助けてくれてありがとう！ :)

proxylocalhostgulpbrowser-sync
42
Tom Oakley

私にとっては、Hostを指定してからopen:'external'、 このような：

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

それがあなたを助けるかどうか確認してください。私の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を実行すると、コンソールは</body>の前にHTMLに挿入する必要があるコードのスニペットを表示します。 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 }
} ?>
16
thiagobraga

良い質問-WordPress=も同じで、同様の問題がありました。BrowserSyncサイトのドキュメントでは実際にこれを明確にすることはできませんでしたが、概要で私の問題の解決策に出会いました http：// localhost：3001 / で実行されるBrowserSync UIのページ--proxyなどのモードフラグなしでBrowserSyncを実行すると、メッセージが表示されます。

このスニペットを</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-style Chrome拡張機能を書いて仕事をする可能性があります。これがGulpの特定のケースに当てはまるかどうかはわかりませんが、コマンドラインでは機能します。

11
And Finally

Varying-Vagrant-Vagrants を使用して、既に説明したソリューションに従いますが、net::ERR_CONNECTION_REFUSED Browser Syncからポーリングするとき、それを解決するために以下を行いました。

gulpfile.js

const gulp = require("gulp");
const browserSync = require("browser-sync").create();

gulp.task("serve", () => {
    browserSync.init({
        socket: {
            domain: "localhost:3000"
        }
    });

    gulp.watch("**/*.php").on("change", browserSync.reload);
});

ランニング gulp serve端末でスニペットを記録します。そのスニペットからbrowser-sync-clientのバージョンを取得し、それを置き換えます：

functions.php

<?php

add_action( 'wp_footer', function () { ?>
    <script type='text/javascript' id="__bs_script__">//<![CDATA[
        document.write("<script async src='http://localhost:3000/browser-sync/browser-sync-client.X.X.X.js'><\/script>");
    //]]></script>
<?php }, 999);

?>

スクリプトのホスト名はソケットドメインと同じであることに注意してくださいlocalhost:3000そして、この時点でドメイン名から入力し、phpファイルが変更されたときにBrowser Syncでサイトをリロードできるようになります。

Browser Syncがログに記録するスニペットを削除する場合：

browserSync.init({
    logSnippet: false,
    socket: {
        domain: "localhost:3000"
    }
});
2
a.guerrero.g87

私がアプリをデプロイするときは、Herokuと同じように0.0.0.0:5000を使用してすべてのアドレスをリッスンする必要があるため、ここでうまくいきました。私はdokkuを使用し、HerokuのようなPaaSのオ​​ープンソースオプションを使用します。

gulp.task('serve', () => {
  browserSync.init({
    port: process.env.PORT || 5000,
    server: { baseDir: root }, // you may not need this
    domain: '0.0.0.0'
 });
});

gulpタスクを実行するとlocalhost:5000で開きますが、通常は開発ではgulpのみが必要であり、実稼働では必要ないため、これはうまく機能しています。

1
Seth Bergman