node.js - files - browsersync laravel

BrowserSync no puede obtener/

Question

Solo he instalado NodeJS y BrowserSync con este comando:

npm install -g browser-sync 

Después de usar este comando para iniciar el servidor:

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

Y me sale el siguiente error: No se puede obtener /

Estoy confundido porque quiero usar BrowserSync con mi proyecto Laravel.

¿Dónde debo instalar BrowserSync?

Gracias.

Answer 1

Asegúrese de estar en el directorio donde se encuentra el archivo index.html. Lo más probable es que esté ejecutando ese comando desde el directorio raíz de su proyecto y esto no se ejecutará a menos que especifique la ruta del índice.

Answer 2

BrowserSync solo carga archivos estáticos de forma predeterminada. Si desea usarlo para cargar un archivo php (index.php), debe iniciar el servidor php y luego conectarse a él con la sincronización del navegador a través de la opción proxy.

Puedes lograr esto con el siguiente código. NB: este código va a su archivo 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'']
    });
}

Ahora, dentro del alcance de los complementos de su archivo de configuración de paquete web, puede crear una instancia de nuestro objeto Servir. NB: sugeriré que sea el último plugin al que llamas.

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

Espero que esto haya sido útil.

Answer 3

Conseguí que esto funcionara sin usar gulp-php-connect. Parecía redundante si BrowserSync proporciona un método proxy. Estoy usando Gulp 4.0alpha.3 y el último npm. No me molesté en tratar de hacer que las cosas de es2015 funcionen, así que en lugar de ''importar'' y ''exportar'' usé el ''requisito'' y ''exportaciones'' más tradicionales. y gulp tarea por defecto. (''exportar compilación predeterminada'' es mucho más limpio: D) El resto es "Gulp 4". Esto es mínimo, precompilación SCSS e inyección de CSS. Este es un paso hacia una solución más grande, pero parece ser un reto para muchas personas, incluido yo mismo, para comenzar: PHP / XAMPP / SCSS parece una configuración común, así que espero que esto ayude a algunas personas. Esto funciona exactamente igual que usar gulp-php-connect. Aquí está mi gulpfile.js entero:

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);

Answer 4

Documentación de revisión: de forma predeterminada, el archivo de índice del proyecto, por ejemplo, puede ser index.html, pero si tiene un nombre diferente, debe especificarlo con el siguiente indicador que se indica en la documentación:

--index: especifique qué archivo debe usarse como la página de índice

En mi caso:

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

Espero haberte ayudado, nos vemos.

Answer 5

Necesitas usar la opción de proxy en su lugar

browser-sync start --proxy yoursite.dev

Answer 6

Porque solo funciona con index.html por defecto, por ejemplo:

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

brow.html  css

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

Resultado Esperado:

Cannot GET/

Para ver su página web estática en el navegador web en lugar de ese molesto mensaje, debe cambiar el nombre de un archivo brow.html a index.html . Esto solucionará Cannot GET/ problema.

PD: donde está instalando una sincronización de navegador no importa. Simplemente escriba npm install -g browser-sync directorio en el que se encuentre y, después de verificar dos veces, browser-sync --version .

Answer 7

Usar BrowserSync como servidor solo funciona si está ejecutando un sitio estático, por lo que PHP no funcionará aquí.

Parece que estás usando XAMPP para servir tu sitio, puedes usar BrowserSync para hacer proxy a tu host local.

Ejemplo:

browser-sync start --proxy localhost/yoursite

Referencias:

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

Answer 8

esto si o los usuarios maliciosos, sé que tienen configuraciones diferentes, tienen la configuración de su servidor local pero aún no funcionan, hacen comentarios o eliminan esta línea

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

agrega esta linea

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

Cambie "la carpeta de su sitio con la carpeta real, su carpeta raíz, no el tema, la carpeta de plantilla en la que está trabajando, visite https://browsersync.io/docs/grunt para obtener más detalles.

Answer 9

Este artículo fue extremadamente útil para que browsersync funcione con un sitio PHP.

Estas son las configuraciones tanto para Grunt como para Gulp (tomadas del artículo)

Gruñido

Necesitarás el plugin 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'']);

Trago

Necesitarás el plugin 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]);
});