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

参考资料：

• http://www.browsersync.io/docs/command-line/#proxy-example
• https://github.com/BrowserSync/browser-sync/issues/5

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/ 问题。

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

Answer 3

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-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

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

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

添加这一行

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

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

Answer 5

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

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

就我而言：

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

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

Answer 6

当响应根/ 的请求时，浏览器同步将默认查找index.html 文件。如果不存在，则会发送错误消息。

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

browser-sync start --server --directory

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

Answer 7

您需要改用代理选项

browser-sync start --proxy yoursite.dev

Answer 8

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

Answer 9

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()
]

我希望这会有所帮助。

Answer 10

我在不使用 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);

Answer 11

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