BrowserSync Kann nicht GET/

Question

Ich habe nur installiert NodeJS und BrowserSync mit diesem Befehl:

npm install -g browser-sync 

Nachdem ich diesen Befehl verwenden, um den Server zu starten:

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

Und ich bekomme die folgende Fehlermeldung: Kann nicht GET/

Ich bin verwirrt, weil ich BrowserSync mit meinem Laravel-Projekt verwenden möchte.

Wo sollte ich BrowserSync installieren?

Danke.

Answer 1

Die Verwendung von BrowserSync als Server funktioniert nur, wenn Sie eine statische Site betreiben, damit PHP hier nicht funktioniert.

Sieht aus, als ob Sie XAMPP verwenden, um Ihre Site zu bedienen. Sie können BrowserSync verwenden, um Ihren lokalen Host zu proxysen.

Beispiel:

browser-sync start --proxy localhost/yoursite 

Referenzen:

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

Answer 2

Weil es nur mit standardmäßig index.html zum Beispiel funktioniert:

linux@linux-desktop:~/Templates/browsersync-project$ ls 

brow.html css 

linux@linux-desktop:~/Templates/browsersync-project$ browser-sync start --server --files '.' 

Erwartetes Ergebnis:

Cannot GET/ 

Um Ihre statische Web-Seite im Web-Browser statt dass lästige Nachricht eine Datei brow.html zu index.html umbenennen zu sehen. Dies löst Cannot GET/ Problem.

P.S. Wo Sie eine Browser-Synchronisierung installieren, spielt keine Rolle. Geben Sie einfach npm install -g browser-sync ein, in welchem ​​Verzeichnis Sie sich auch befinden, und nach der doppelten Überprüfung browser-sync --version.

Answer 3

Sie müssen die Proxy-Option verwenden, anstatt

browser-sync start --proxy yoursite.dev 

Answer 4

This article extreamly hilfreich war browsersync für immer mit einer PHP-Website zu arbeiten.

Diese sind, was die Konfigurationen für beide Grunt und Gulp wie (aus dem Artikel entnommen) aussehen sollte

Grunt

Sie müssen das 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

Sie benötigen th e 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]); 
}); 

Answer 5

dies, wenn oder Grunzen Benutzer, ich weiß, schluck unterschiedliche Einstellungen hat, haben Sie Ihre lokalen Setup-Server aber immer noch nicht funktioniert, Kommentar oder diese Zeile löschen

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

fügen Sie diese Zeile

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

Change „yoursitefolder mit aktuellen Ordner Ihre Stammordner nicht Thema, Vorlagenordner Sie arbeiten an Weitere Informationen finden Sie unter https://browsersync.io/docs/grunt Enjoy

Answer 6

Stellen Sie sicher, dass Sie sich in dem Verzeichnis befinden, in dem sich die Datei index.html befindet. Sie führen diesen Befehl höchstwahrscheinlich aus dem Stammverzeichnis Ihres Projekts aus, und das wird nur ausgeführt, wenn Sie den Indexpfad angeben.

Answer 7

BrowserSync lädt nur statische Dateien, wenn Sie eine PHP-Datei (index.php) laden wollen, müssen Sie den php-Server starten und sich dann mit der Browser-Synchronisierung über die Proxy-Option verbinden.

Sie können dies mit dem folgenden Code erreichen. Hinweis: Dieser Code wird in die Datei webpack.config.js geschrieben.

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

Jetzt können Sie innerhalb des Plugins-Bereichs Ihrer Webpack-Konfigurationsdatei unser Serve-Objekt instanziieren. NB: Ich schlage vor, es ist das letzte Plugin, das Sie anrufen.

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

Ich hoffe, das war hilfreich.

Answer 8

Bewertung Dokumentation: Standardmäßig kann die Indexdatei des Projektes, zum Beispiel seines index.html, aber wenn es einen anderen Namen hat, müssen Sie es mit dem folgenden Flag in der Dokumentation angegeben angeben:

--index: Geben Sie die Datei als der Index-Seite verwendet werden soll

In meinem Fall:

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

ich hoffe, dass ich Ihnen geholfen haben, sehen Sie.

Answer 9

Ich habe das ohne gulp-php-connect zu arbeiten. Es erschien überflüssig, wenn BrowserSync selbst eine Proxy-Methode zur Verfügung stellt. Ich benutze Gulp 4.0alpha.3 und die neueste npm. Ich habe mich nicht darum gekümmert, dass die es2015-Sachen funktionieren, also habe ich anstelle von "Import" und "Export" die traditionelleren "Anforderungen" und "Exporte" verwendet. und schlucke Standardaufgabe.('export default build' ist viel sauberer: D) Der Rest ist "Gulp 4". Dies ist minimal, SCSS Precompilation und CSS-Injektion. Dies ist ein Schritt in Richtung einer größeren Lösung, aber dies schien für viele Leute, einschließlich mir selbst, eine Herausforderung zu sein: PHP/XAMPP/SCSS scheint ein gewöhnliches Setup zu sein, also hoffe ich, dass dies einigen Leuten hilft. Das funktioniert genauso wie mit gulp-php-connect. Hier ist meine gesamte 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);