node.js - files - browsersync laravel
BrowserSync no puede obtener/ (9)
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.
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.
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.
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);
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.
Necesitas usar la opción de proxy en su lugar
browser-sync start --proxy yoursite.dev
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 .
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:
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.
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]);
});