proxy - guia - qgis español
Uso de la URL original, no proxy, con sincronización de navegador (5)
Recientemente cambié de Grunt.js a Gulp.js porque varias personas me dijeron cuánto mejor y más rápido (¡es verdad!). He agregado BrowserSync a mi Gulpfile.js, por lo que es más fácil de probar en varios dispositivos. Funciona muy bien y fue fácil de configurar. En el contexto, desarrollo sitios de WordPress para el 95% de mi tiempo de trabajo, los ejecuto en un servidor virtual Apache, con Multisite habilitado, y tengo muchos subdominios locales configurados para cada cliente, por ejemplo, site1.domain.dev, site2 .domain.dev, etc. Esto funciona muy bien, y lo he estado haciendo de esta manera durante un par de años. Sin embargo, debido a que BrowserSync necesita crear un proxy en mi sitio para poder sincronizar e insertar el CSS, el sitio que se ejecuta actualmente a través de BrowserSync se enruta a http://localhost:3000 . Esto está bien y entiendo por qué tiene que pasar, pero se mete un poco con WordPress (ya que la URL no es la misma, etc.), además de que soy un gran usuario de fuentes TypeKit / Cloud, lo que significa que porque el sitio es al enrutarse a localhost, ninguna de las fuentes se carga. Por supuesto, podría simplemente agregar http://localhost:3000 a la lista de dominios para cada sitio en TypeKit, pero esto parece una solución temporal y me pregunto si existe una mejor manera de hacerlo.
He agregado en la parte BrowserSync de mi Gulpfile.js:
gulp.task(''serve'', function() {
browserSync({
proxy: ''site1.domain.dev''
});
gulp.watch(''assets/styles/source/**/*.scss'', [''styles'']);
gulp.watch(''*.php'', reload);
gulp.watch(''assets/js/source/*.js'', [''scripts'']);
gulp.watch(''assets/js/plugins/**/*.js'', [''plugins'']);
});
Entonces mi pregunta es, ¿sería posible que BrowserSync vaya directamente a mi URL ( http://site1.domain.dev ) en lugar de enrutarlo a través de http://localhost:3000 ? Como una ventaja adicional, sería increíble si el dominio pudiera eliminarse de la propiedad del proxy BrowserSync, ya que utilizo un script de automatización para configurar un nuevo sitio en mi instalación WP Multisite y realmente no quiero tener que editar mi archivo gulp cada vez que configuro un nuevo sitio
¡Gracias por la ayuda! :)
Buena pregunta: también estoy en WordPress y tuve un problema similar. La documentación en el sitio BrowserSync realmente no lo deja claro, pero encontré una solución a mi problema en la página de información general de la interfaz de usuario de BrowserSync que se ejecuta en http://localhost:3001/ . El mensaje aparece cuando ejecuta BrowserSync sin un indicador de modo como --proxy .
Si pega este fragmento en algún lugar antes de su etiqueta de cierre </body>
<script type=''text/javascript'' id="__bs_script__">//<![CDATA[
document.write("<script async src=''http://HOST:3000/browser-sync/browser-sync-client.2.6.1.js''><//script>".replace("HOST", location.hostname));
//]]></script>
y ejecute BrowserSync sin el --proxy , por ejemplo
browser-sync start --files "css/*.css"
Actualizará su sitio en su dirección normal. Voy a envolver el fragmento en una condición para que solo se incluya en mis entornos de desarrollo: en el futuro tal vez una persona amable podría escribir una extensión de Chrome al estilo LiveReload para hacer el trabajo. No estoy seguro de si esto se ajusta a su caso particular con Gulp, pero funciona con la línea de comando.
Esto es lo que funcionó para mí, porque cuando despliegue mi aplicación, necesita escuchar en todas las direcciones usando 0.0.0.0:5000 , como lo hace Heroku. Uso dokku y la opción de fuente abierta para un PaaS similar a Heroku.
gulp.task(''serve'', () => {
browserSync.init({
port: process.env.PORT || 5000,
server: { baseDir: root }, // you may not need this
domain: ''0.0.0.0''
});
});
Todavía se abre en localhost:5000 cuando ejecuto la tarea gulp , pero como normalmente solo necesito un trago para el desarrollo y no la producción, esto ha funcionado bien para mí.
Para mí, funcionó al especificar el host y luego open: ''external'' , como este:
browserSync.init({
proxy: ''http://myproject.dev/'',
host: ''myproject.dev'',
open: ''external''
});
Usando Varying-Vagrant-Vagrants sigo las soluciones ya mencionadas, pero seguí obteniendo una net::ERR_CONNECTION_REFUSED al sondear desde Browser Sync, para resolver que hice lo siguiente:
gulpfile.js
const gulp = require("gulp");
const browserSync = require("browser-sync").create();
gulp.task("serve", () => {
browserSync.init({
socket: {
domain: "localhost:3000"
}
});
gulp.watch("**/*.php").on("change", browserSync.reload);
});
Al ejecutar el gulp serve en su terminal se registrará un fragmento, desde ese fragmento tomará la versión del navegador-sincronización-cliente y la reemplazará en:
functions.php
<?php
add_action( ''wp_footer'', function () { ?>
<script type=''text/javascript'' id="__bs_script__">//<![CDATA[
document.write("<script async src=''http://localhost:3000/browser-sync/browser-sync-client.X.X.X.js''><//script>");
//]]></script>
<?php }, 999);
?>
Tenga en cuenta que el nombre de host de la secuencia de comandos es el mismo que el del dominio de conexión localhost:3000 y que en este punto debe poder ingresar desde su nombre de dominio y tener la sincronización del navegador recargando su sitio cuando se modifique cualquier archivo php.
Si desea deshacerse del fragmento que registra Browser Sync:
browserSync.init({
logSnippet: false,
socket: {
domain: "localhost:3000"
}
});
Verifica si te ayudará. Mi gulpfile.js se ve así:
gulp.task(''browser-sync'', function () {
browserSync({
logPrefix: ''Your Project'',
host: ''site1.domain.dev'',
port: 3060,
open: false,
notify: false,
ghost: false,
// Change this property with files of your project
// that you want to refresh the page on changes.
files: [
''public/css/**.min.css'',
''public/js/**.min.js'',
''app/**/*.php'',
''index.php'',
''.htaccess''
]
});
});
// Other tasks: watch, styles, scripts...
Después de ejecutar Gulp, la consola mostrará un fragmento de código que debe colocar en su HTML antes del </body> . La versión de browser-sync-client y el puerto que está utilizando pueden ser diferentes. Nota: después de insertar el fragmento en su código, el mensaje seguirá apareciendo. Desde la versión 1.5.2 de BrowserSync, puede desactivar el fragmento de registro con logSnippet: false en su configuración.
[Your Project] Copy the following snippet into your website, just before the closing </body> tag
<script type=''text/javascript'' id="__bs_script__">//<![CDATA[
document.write("<script async src=''http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js''><//script>".replace("HOST", location.hostname));
//]]></script>
[Your Project] Access URLs:
----------------------------------
UI: http://localhost:3060
----------------------------------
UI External: http://site1.domain.dev:3060
----------------------------------
[Your Project] Watching files...
Después de insertar el fragmento generado en su archivo, guarde el archivo y abra la dirección http://site1.domain.dev sin puerto en su navegador. Si todo es correcto, el sitio actualizará los cambios de los browserSync.files .
Puede agregar una verificación para incluir solo este fragmento en los entornos de desarrollo. Por ejemplo, yo uso PHP y CodeIgniter en mis proyectos, entonces, para incluirlo solo en entornos de desarrollo, hago esto:
<?php
if (ENVIRONMENT === ''development'') {
$browserSync = rtrim(base_url(), ''/'') . '':3060/'';
$fileHeaders = @get_headers($browserSync);
if ($fileHeaders) { ?>
<script id="__bs_script__">
document.write("<script async src=''http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js''><//script>".replace("HOST", location.hostname));
</script>
<?php }
} ?>