Question

我只使用此命令安装了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？

感谢。

Answer 1

将BrowserSync用作服务器只有在运行静态站点时才有效，因此PHP无法在此处运行。

看起来您正在使用XAMPP为您的网站提供服务，您可以使用BrowserSync代理您的本地主机。

示例：

browser-sync start --proxy localhost/yoursite

参考文献：

Answer 2

因为默认情况下它仅适用于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/

要在网络浏览器中查看静态网页而不是恼人的消息，您必须将文件brow.html重命名为index.html。这将解决Cannot GET/问题。

P.S。你在哪里安装浏览器同步并不重要。只需键入npm install -g browser-sync您所在的目录，并仔细检查browser-sync --version。

Answer 3

This article非常有助于使browserync与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-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]);
});

Answer 4

审核文档：默认情况下，项目的索引文件可以是index.html，但如果它具有不同的名称，则必须使用文档中指示的以下标志指定它：

- index：指定应将哪个文件用作索引页

就我而言：

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

我希望我能帮助你，见到你。

Answer 5

您需要使用代理选项

browser-sync start --proxy yoursite.dev

Answer 6

这个if或grunt用户，我知道gulp有不同的设置，你的本地服务器设置但仍然无法正常工作，注释掉或删除此行

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

添加此行

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

更改“yoursitefolder与实际文件夹您的根文件夹不是主题，您正在处理的模板文件夹查看https://browsersync.io/docs/grunt了解更多详情享受

Answer 7

确保您位于index.html文件所在的目录中。您最有可能从项目的根目录运行该命令，除非您指定索引路径，否则这将不会运行。

Answer 8

BrowserSync默认只加载静态文件，如果你想用它来加载php文件（index.php），你必须启动php服务器，然后通过代理选项通过浏览器同步连接到它。

您可以使用以下代码实现此目的。注意：此代码会进入您的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对象。注意：我建议你这是你打电话的最后一个插件。

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

我希望这很有帮助。

Answer 9

我没有使用gulp-php-connect就可以使用它。如果BrowserSync本身提供代理方法，那似乎是多余的。我使用的是Gulp 4.0alpha.3和最新的npm。我并不打算让es2015的东西工作，而不是“导入”。和＆＃39;出口＆＃39;我使用了更传统的＆＃39;要求＆＃39;和＆＃39;出口。＆＃39;和gulp默认任务。（＆＃39;导出默认构建＆＃39;更清洁：D）其余的是＆＃34; Gulp 4＆＃34;。这是最小的，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);

Answer 10

在回答对根/的请求时，默认情况下，浏览器同步将查找index.html文件。如果不存在，则会发送错误。

更改此行为的最佳方法是使浏览器同步响应者使用目录列表而不是index.html。

browser-sync start --server --directory

这样，您将获得一个目录列表，列出浏览器同步的根目录中的所有文件，而不是错误。

Answer 11

我的目录使用“ Welcome.html”而不是“ index.html”。所以我打了 http://localhost:3000/Welcome.html然后起作用了...

BrowserSync无法获取/

11 个答案: