BrowserSync kann nicht erhalten /

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

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

brow.html  css

[email protected]:~/Templates/browsersync-project$ browser-sync start --server --files '.'

Erwartetes Ergebnis:

Cannot GET/

Um Ihre statische Webseite im Webbrowser anstelle dieser lästigen Nachricht zu sehen, müssen Sie eine Datei brow.html in index.html umbenennen. Dies löst das Cannot GET/-Problem.

P.S. Wo Sie eine Browsersynchronisierung installieren, spielt keine Rolle. Geben Sie einfach npm install -g browser-sync in das Verzeichnis ein, in dem Sie sich befinden, und prüfen Sie nach browser-sync --version.

Dieser Artikel war extrem hilfreich, um Browsersync dazu zu bringen, mit einer PHP - Site zu arbeiten.

So sollten die Konfigurationen für Grunt und Gulp aussehen (aus dem Artikel)

Grunzen

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

Überprüfen Sie die Dokumentation: Standardmäßig kann die Indexdatei des Projekts beispielsweise index.html sein. Wenn sie jedoch einen anderen Namen hat, müssen Sie sie mit dem folgenden in der Dokumentation angegebenen Flag angeben:

--index: Geben Sie an, welche Datei als Indexseite verwendet werden soll

In meinem Fall:

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

Ich hoffe, ich habe dir geholfen, bis bald.

wenn Benutzer grunzen oder grunzen, weiß ich, dass der Schluck andere Einstellungen hat, dass Ihr lokaler Server eingerichtet ist, aber immer noch nicht funktioniert Kommentieren Sie diese Zeile oder löschen Sie sie

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

füge diese Zeile hinzu

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

Ändern Sie den Ordner mit dem tatsächlichen Ordner, in dem sich der Stammordner nicht im Design befindet. Der Vorlagenordner, an dem Sie arbeiten Checkout https://browsersync.io/docs/grunt für weitere Details Viel Spaß

Ich habe es verstanden, ohne gulp-php-connect zu arbeiten. Es erschien überflüssig, wenn BrowserSync selbst eine Proxy-Methode bereitstellt. Ich verwende Gulp 4.0alpha.3 und die letzte npm. Ich habe mir nicht die Mühe gemacht, das es2015-Zeug zum Laufen zu bringen. Statt "Importieren" und "Exportieren" habe ich die traditionelleren "Anforderungen" und "Exporte" verwendet. und Schluck Standardaufgabe. ('export default build' ist viel sauberer: D) Der Rest ist "Gulp 4". Dies ist eine minimale SCSS-Vorkompilierung und CSS-Injektion. Dies ist ein Schritt auf dem Weg zu einer größeren Lösung, aber dies schien für viele Leute, darunter auch ich, eine Herausforderung zu sein: PHP/XAMPP/SCSS scheint ein gewöhnliches Setup zu sein. Dies funktioniert genauso wie gulp-php-connect. Hier ist mein gesamtes 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);

Sie müssen stattdessen die Proxy-Option verwenden

browser-sync start --proxy yoursite.dev

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 über das Stammverzeichnis des Projekts aus. Dies wird nur ausgeführt, wenn Sie den Indexpfad angeben.

BrowserSync lädt standardmäßig nur statische Dateien. Wenn Sie eine PHP-Datei (index.php) laden möchten, müssen Sie den PHP-Server starten und dann über die Proxy-Option eine Browsersynchronisierung herstellen.

Dies erreichen Sie mit dem folgenden Code . NB: Dieser Code wird in Ihre Datei webpack.config.js übernommen.

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 Plug-In-Bereichs Ihrer Webpack-Konfigurationsdatei unser Serve-Objekt instanziieren. NB: Ich schlage vor, es ist das letzte Plugin, das Sie aufrufen.

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

Ich hoffe das war hilfreich.