BrowserSync не может GET/

Ответ 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

Ответ 2

Поскольку он работает только с index.html по умолчанию, например:

[email protected]:~/Templates/browsersync-project$ ls 

brow.html  css

[email protected]:~/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.

Ответ 3

Эта статья была чрезвычайно полезной для того, чтобы заставить браузеры работать с PHP-сайтом.

Вот как выглядят конфигурации для Grunt и Gulp (взяты из статьи)

Grunt

Вам понадобится 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]);
});

Ответ 4

Документация для обзора: По умолчанию индексный файл проекта, например, может быть index.html, но если он имеет другое имя, вы должны указать его со следующим флагом, указанным в документации:

- index: укажите, какой файл следует использовать как индексную страницу

В моем случае:

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

Надеюсь, я помог вам, до вас.

Ответ 5

Вместо этого вам нужно использовать опцию прокси

browser-sync start --proxy yoursite.dev

Ответ 6

это, если или ворчащие пользователи, я знаю, что gulp имеют разные настройки, настройки вашего локального сервера, но все еще не работают, комментарий или удаление этой строки

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

добавить эту строку

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

Измените папку "yoursitefolder" с фактической папкой вашей корневой папки, а не темой, папкой шаблона, над которой вы работаете. посмотрите https://browsersync.io/docs/grunt для получения более подробной информации Наслаждайтесь

Ответ 7

Убедитесь, что вы находитесь в каталоге, где находится файл index.html. Скорее всего, вы запускаете эту команду из корневого каталога вашего проекта, и это не будет выполняться, если вы не укажете путь индекса.

Ответ 8

BrowserSync по умолчанию загружает статические файлы, если вы хотите использовать его для загрузки php файла (index.php), вам нужно запустить php-сервер, а затем подключиться к нему с помощью синхронизации браузера через опцию прокси.

Это можно сделать с помощью следующего кода. NB: этот код входит в ваш файл 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. NB: Я предлагаю, чтобы это был последний плагин, который вы вызываете.

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

Надеюсь, это было полезно.

Ответ 9

Я получил это, чтобы работать без использования gulp-php-connect. Это казалось излишним, если сам BrowserSync предоставляет метод прокси. Я использую Gulp 4.0alpha.3 и последний npm. Я не стал пытаться заставить вещи es2015 работать, поэтому вместо "import" и "export" я использовал более традиционные "require" и "export". и усвоить задание по умолчанию. ('экспортная сборка по умолчанию' намного чище: 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);

Ответ 10

В моем каталоге используется "Welcome.html" вместо "index.html". Поэтому я набрал http://localhost:3000/Welcome.html тогда все заработало...