BrowserSync не удается получить /

потому что он работает только с индексом.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 to index.html. Это решит

в этой статье было чрезвычайно полезно для получения browsersync для работы с сайтом PHP.

вот как должны выглядеть конфигурации для хрюканья и глотка (взятые из статьи)

грунт

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

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

browser-sync start --proxy yoursite.dev

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

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

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

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

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

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

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

Вы можете добиться этого с помощью следующего кода. NB: этот код входит в ваш webpack.конфиг.файл 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()
]

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

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

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

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

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

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