38

次のコマンドを使用して、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: ./

そして、次のエラーが表示されます: 取得できません /

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

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

ありがとう。

4

11 に答える 11

29

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

XAMPP を使用してサイトを提供しているようです。BrowserSync を使用してローカルホストをプロキシできます。

例：

browser-sync start --proxy localhost/yoursite

参考文献:

于 2015-04-01T02:49:05.487 に答える
15

デフォルトでは 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/問題は解決します。

PS browser-sync をインストールする場所は関係ありません。npm install -g browser-sync現在のディレクトリを入力するだけで、再確認した後browser-sync --version.

于 2015-06-30T16:48:29.940 に答える
3

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

これらは、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-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]);
});
于 2016-05-05T01:22:08.867 に答える
0

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

browser-sync start --proxy yoursite.dev
于 2015-09-03T18:04:32.050 に答える
0

gulp-php-connectを使用せずにこれを機能させました。BrowserSync 自体がプロキシ メソッドを提供する場合、冗長に思えました。Gulp 4.0alpha.3 と最新の npm を使用しています。私は es2015 のものを機能させようとはしなかったので、'import' と 'export' の代わりに、より伝統的な 'require' と 'exports' を使用しました。およびgulpのデフォルトタスク。('export default build' はずっときれいです:D) 残りは "Gulp 4" です。これは最小限の SCSS プリコンパイルと CSS インジェクションです。これはより大きな解決策への一歩ですが、私を含む多くの人にとって、これを始めるのは少し難しいように思えました. これは、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);
于 2018-02-15T06:22:08.570 に答える