BrowserSync 无法获取 /

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: ./

我收到以下错误：无法获取 /

我很困惑，因为我想在我的 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

您需要改用代理选项

browser-sync start --proxy yoursite.dev

Answer 4

This article 对于让 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]);
});

Answer 5

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

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

添加这一行

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

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

Answer 6

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

Answer 7

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: [
    ...,
    new Serve()
]

希望对您有所帮助。

Answer 8

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

--index :指定哪个文件作为索引页

就我而言：

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

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

Answer 9

我在不使用 gulp-php-connect 的情况下使它工作。如果 BrowserSync 本身提供了一个代理方法，这似乎是多余的。我正在使用 Gulp 4.0alpha.3 和最新的 npm。我没有费心尝试让 es2015 的东西工作所以我使用更传统的 'require' 和 'exports.' 和 gulp 默认任务而不是 'import' 和 'export' . （'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);

Answer 10

我的目录使用 "Welcome.html" 而不是 "index.html"。所以我输入 http://localhost:3000/Welcome.html 然后成功了...

Answer 11

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

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

browser-sync start --server --directory

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

BrowserSync 无法获取 /

BrowserSync Cannot GET /

node.js

laravel

browser-sync