web-dev-qa-db-ja.com

BrowserSyncを取得できません/

このコマンドでNodeJSとBrowserSyncのみをインストールしました。

npm install -g browser-sync

このコマンドを使用してサーバーを起動した後：

C:\xampp\htdocs\browser_sync
λ browser-sync start --server
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.223:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.223:3001
 --------------------------------------
[BS] Serving files from: ./

そして、次のエラーが表示されます：GET /

Laravel=プロジェクトでBrowserSyncを使用したいので、混乱しています。

BrowserSyncはどこにインストールすればよいですか？

ありがとう。

node.jsbrowser-sync
30
Funny Frontend

BrowserSyncをサーバーとして使用するのは、静的サイトを実行している場合にのみ機能するため、PHPはここでは機能しません。

XAMPPを使用してサイトを提供しているように見えますが、BrowserSyncを使用してlocalhostをプロキシできます。

例：

browser-sync start --proxy localhost/yoursite

参照：

24
Kyle Marimon

デフォルトではindex.htmlでのみ機能するため、たとえば：

linux@linux-desktop:~/Templates/browsersync-project$ ls 

brow.html  css

linux@linux-desktop:~/Templates/browsersync-project$ browser-sync start --server --files '.'

期待される結果：

Cannot GET/

迷惑なメッセージの代わりにWebブラウザで静的Webページを表示するには、ファイルの名前をbrow.htmlからindex.htmlに変更する必要があります。これはCannot GET/問題を解決します。

追伸ブラウザ同期をインストールする場所は重要ではありません。 npm install -g browser-syncと入力して、現在のディレクトリを入力し、browser-sync --versionを再確認します。

13
daGo

この記事 は、browsersyncをPHPサイトで動作させるために非常に役立ちました。

これらは、GruntとGulpの両方の構成がどのように見えるかです（記事から引用）。

グラント

grunt-php プラグインが必要です

grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({
    watch: {
        php: {
            files: ['app/**/*.php']
        }
    },
    browserSync: {
        dev: {
            bsFiles: {
                src: 'app/**/*.php'
            },
            options: {
                proxy: '127.0.0.1:8010', //our PHP server
                port: 8080, // our new port
                open: true,
                watchTask: true
            }
        }
    },
    php: {
        dev: {
            options: {
                port: 8010,
                base: 'path/to/root/folder'
            }
        }
    }
});

grunt.registerTask('default', ['php', 'browserSync', 'watch']);

Gulp

gulp-connect-php プラグインが必要になります

// Gulp 3.8 code... differs in 4.0
var gulp = require('gulp'),
    php = require('gulp-connect-php'),
    browserSync = require('browser-sync');

var reload  = browserSync.reload;

gulp.task('php', function() {
    php.server({ base: 'path/to/root/folder', port: 8010, keepalive: true});
});
gulp.task('browser-sync',['php'], function() {
    browserSync({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});
gulp.task('default', ['browser-sync'], function () {
    gulp.watch(['build/*.php'], [reload]);
});
3
Daniel Tonon

ドキュメントの確認：デフォルトでは、たとえばプロジェクトのインデックスファイルはindex.htmlにできますが、名前が異なる場合は、ドキュメントに示されている次のフラグで指定する必要があります。

--index：インデックスページとして使用するファイルを指定します

私の場合：

browser-sync start --index"datalayer.html"  --server --files "./*.*"

お役に立てば幸いです。

1
alfonsovc15

これは、もしユーザーをuntるなら、gulpの設定が異なり、ローカルサーバーがセットアップされているが、まだ機能していないことを知っている、この行をコメントアウトまたは削除する

//server: 'http://localhost/yoursiterootfolder/'

この行を追加

proxy: "http://localhost/yoursiterootfolder/"

「yoursitefolderを、実際のフォルダー、ルートフォルダー、テーマではなく、作業中のテンプレートフォルダーに変更してください https://browsersync.io/docs/grunt 詳細をお楽しみください

0
Mr.Meshack

Gulp-php-connectを使用せずにこれを機能させました。 BrowserSync自体がプロキシメソッドを提供する場合、冗長に見えます。 Gulp 4.0alpha.3と最新のnpmを使用しています。私はes2015のものを機能させようとはしなかったので、「インポート」と「エクスポート」の代わりに、より伝統的な「必要」と「エクスポート」を使用しました。およびgulpのデフォルトタスク。 （ 'export default build'はずっときれいです：D）残りは "Gulp 4"です。これは最小限のSCSSプリコンパイルとCSSインジェクションです。これはより大きなソリューションへのステップですが、これは自分自身を含む多くの人々にとって挑戦するのが難しいように思われました：PHP/XAMPP/SCSSは一般的なセットアップのように思えるので、これが一部の人々に役立つことを願っています。これは、gulp-php-connectを使用するのとまったく同じように機能します。これが私のgulpfile.js全体です。

const gulp = require('gulp');
const del = require('del');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const sourcemaps = require('gulp-sourcemaps');

const server = browserSync.create();

const paths = {
  scss: {
    src: './scss/admin.scss',
    dest: './css/'
  }
};

const clean = () => del(['dist']);

function scss() {
  return gulp.src(paths.scss.src, { sourcemaps: true })
    .pipe(sass())
    .pipe(gulp.dest(paths.scss.dest));
}

function reload(done) {
  server.reload();
  done();
}

function serve(done) {
  server.init({
    injectChanges: true,
    proxy: 'localhost:8100/',
    port: 8080,
    open: true,
    notify: false
  });
  done();
}

const watch = () => gulp.watch('./scss/**/*.scss', gulp.series(scss, reload));

const build = gulp.series(clean, scss, serve, watch);
exports.build = build;

gulp.task('default', build);
0
sinrise

代わりにプロキシオプションを使用する必要があります

browser-sync start --proxy yoursite.dev
0
shane

Index.htmlファイルがあるディレクトリにいることを確認してください。ほとんどの場合、プロジェクトのルートディレクトリからそのコマンドを実行します。インデックスパスを指定しない限り、このコマンドは実行されません。

0
Mahmoud Zalt

BrowserSyncはデフォルトで静的ファイルのみをロードします。それを使用してphpファイル（index.php）をロードする場合は、phpサーバーを起動してから、プロキシオプションを介してブラウザー同期で接続する必要があります。

これは、次のコードで実現できます。 NB：このコードはwebpack.config.jsファイルに入ります。

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var Connect = require('gulp-php-connect');

// we create a serve object which we instantiate in
// webpacks plugins scope.
var Serve = function(){
    Connect.server({
        base: './public',
        port: 9000,
        keepalive: true
    });
    // return a new instance of browser sync
    return new BrowserSyncPlugin({
        proxy: 'localhost:9000',
        port: 8080,
        files: ['public/**/*', 'public/index.php']
    });
}

Webpack構成ファイルのプラグインスコープ内で、Serveオブジェクトをインスタンス化できます。 NB：最後に呼び出すプラグインであることをお勧めします。

plugins: [
    ...,
    new Serve()
]

これがお役に立てば幸いです。

0
Daniel Barde