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/

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

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

于 2015-06-30T16:48:29.940 回答
3

这篇文章对于让 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-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 回答
2

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

--index :指定应该使用哪个文件作为索引页

就我而言：

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

希望对你有所帮助，再见。

于 2017-12-18T00:39:07.340 回答
2

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

更改此行为的最佳方法是使用目录列表而不是index.html.

browser-sync start --server --directory

这样，您将获得 browser-sync 根目录中所有文件的目录列表，而不是错误。

于 2019-12-09T11:27:16.777 回答
2

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

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

添加这一行

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

使用实际文件夹更改“您的站点文件夹”，您的根文件夹不是主题，您正在处理的模板文件夹查看https://browsersync.io/docs/grunt了解更多详细信息

于 2016-10-26T21:26:56.820 回答
0

我在不使用 gulp-php-connect 的情况下让它工作。如果 BrowserSync 本身提供代理方法，这似乎是多余的。我正在使用 Gulp 4.0alpha.3 和最新的 npm。我没有费心尝试让 es2015 的东西正常工作，所以我使用了更传统的 'require' 和 'exports' 而不是“import”和“export”。和 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);
于 2018-02-15T06:22:08.570 回答
0

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

于 2017-01-27T19:56:38.667 回答
0

您需要改用代理选项

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

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 配置文件的 plugins 范围内，你可以实例化我们的 Serve 对象。注意：我建议它是您调用的最后一个插件。

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

我希望这可以帮到你。

于 2017-07-17T17:08:00.060 回答
-1

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

于 2019-05-16T06:47:58.733 回答