47

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

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直接アクセスすることは可能でしょうか? 追加のボーナスとして、自動化スクリプトを使用して WP Multisite インストールで新しいサイトをセットアップし、gulpfile を編集する必要があまりないため、BrowserSync プロキシ プロパティからドメインを削除できれば素晴らしいと思います。新しいサイトを立ち上げるたびに

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

4

5 に答える 5

18

それがあなたを助けるかどうかを確認してください。私の 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 の</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 }
} ?>
于 2015-08-16T16:00:47.510 に答える
2

Varying-Vagrant-Vagrantsを使用して、既に述べた解決策に従いますが、net::ERR_CONNECTION_REFUSEDBrowser 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 のバージョンが取得され、次の場所で置き換えられます。

関数.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"
    }
});
于 2016-03-06T02:36:19.027 に答える