Browser sync ошибка cannot get - Решение и исправление самых разных ошибок на TopOshibok.ru

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Pick a username

Email Address

Password

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Источник

This article was extreamly helpful for getting browsersync to work with a PHP site.

These are what the configurations for both Grunt and Gulp should look like (taken from the article)

Grunt

You will need the grunt-php plugin

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

You will need the gulp-connect-php plugin

// 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]);
});

Источник

Я установил только 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: ./

И я получаю следующую ошибку:
Невозможно GET/

Я запутался, потому что хочу использовать BrowserSync с моим проектом Laravel.

Где я должен установить BrowserSync?

Спасибо.

Ответ 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 тогда все заработало…

Источник

Делаю сайт на Foundation for Sites 6 хочу добавить плагин browser sync, при запуске появляется ошибка Cannot GET /
как решить не пойму?

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var concat = require('gulp-concat');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var browserSync = require('browser-sync').create();


var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];
gulp.task('imagemin', function () {
    return gulp.src('./img/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./img'));
});
gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'compressed' // if css compressed **file size**
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(cssnano())
    .pipe(rename({suffix: '.min'})) // Добавляем суффикс .min
    .pipe(gulp.dest('css'));
    // .pipe(browserSync.stream());
    
});
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir :'./'
        }
        
        
   
    });
    gulp.watch("./scss/*.scss", ['sass']);
    gulp.watch("/*.php").on('change', browserSync.reload);
});
gulp.task('default', ['serve']);

Источник

Nodejs — ошибка (( ☑ 0

Cool_Profi

14.08.18

✎

12:08

Решил посмотреть на этого зверя (книжка приличная попалась)

Поставил ноду. Все пути проверил.

Добавил browser-sync

Нарисовал примитивный html (hello world)

Зашёл в каталог, где html лежит и сказал

browser-sync start —server —files «stylesheets/*.css, *.html»

Оно мне ответило

[Browsersync] Access URLs:

———————————-

       Local: http://localhost:3000

    External: http://10.0.0.25:3000

———————————-

          UI: http://localhost:3001

UI External: http://10.0.0.25:3001

———————————-

[Browsersync] Serving files from: stylesheets/*.css, *.html

и запустило хром на localhost:3000

и я вижу ответ Cannot get /

ПРричём если заглянуть в код — видно, что это отдаёт сам browser-sync

Что я не так сделал?

Вафель

14.08.18

✎