api - plugin - browsersync gulp port

Gulp browser-sync: redirige la solicitud de la API a través del proxy

Question

Estoy intentando redirigir mis solicitudes de API de esta manera con gulp y sincronización de navegador:

gulp.task(''browser-sync'', function () {
var files = [
''../index.html'',
''../views/**/*.html'',
''../assets/css/**/*.css'',
''../assets/js/**/*.js''
];
var url = require(''url''),
proxy = require(''proxy-middleware'');
var proxyOptions = url.parse(''http://localhost:8000/api'');
proxyOptions.route = ''/api'';
browserSync.init(files, {
server: {
baseDir: ''..'',
middleware: [proxy(proxyOptions)]
}
});
});

Pero recibo esta respuesta cuando se envía una llamada a la API:

Error: connect ECONNREFUSED
at errnoException (net.js:904:11)
at Object.afterConnect [as oncomplete] (net.js:895:19)

¿Alguna idea de lo que estoy haciendo mal?

Answer 1

Consulte la documentación oficial sobre el uso de BrowserSync con Gulp . Pude poner en marcha BrowserSync con un proxy en /api sin problemas.

Compruebe para asegurarse de que nada más está utilizando el puerto 8000 . Puede cambiar el puerto que utiliza BrowserSync a través de la opción de port al inicializar BrowserSync .

Aquí está el gulpfile.js que terminé:

npm install gulp url proxy-middleware browser-sync --save-dev

// Include gulp
var gulp = require(''gulp'');
var url = require(''url'');
var proxy = require(''proxy-middleware'');
var browserSync = require(''browser-sync'');
var paths = {
css: [''./**/*.css'', ''!./node_modules/**/*'']
};
// browser-sync task for starting the server.
gulp.task(''browser-sync'', function() {
var proxyOptions = url.parse(''http://localhost:3000/secret-api'');
proxyOptions.route = ''/api'';
// requests to `/api/x/y/z` are proxied to `http://localhost:3000/secret-api`
browserSync({
open: true,
port: 3000,
server: {
baseDir: "./",
middleware: [proxy(proxyOptions)]
}
});
});
// Stream the style changes to the page
gulp.task(''reload-css'', function() {
gulp.src(paths.css)
.pipe(browserSync.reload({stream: true}));
});
// Watch Files For Changes
gulp.task(''watch'', function() {
gulp.watch(paths.css, [''reload-css'']);
});
// Default Task
gulp.task(''default'', [''browser-sync'', ''watch'']);

Si no desea hacer una tarea de trago separada para volver a cargar / transmitir los cambios, puede usar la opción de files :

browserSync({
open: true,
port: 3000,
server: {
baseDir: "./",
middleware: [proxy(proxyOptions)]
},
files: paths.css
});

Answer 2

Me encontré con el mismo problema con la configuración gulp + browser-sync + proxy-middleware, mientras migraba de gruñido a trago.

Error: connect ECONNREFUSED
at errnoException (net.js:904:11)
at Object.afterConnect [as oncomplete] (net.js:895:19)

En mi caso, algo dentro de la red corporativa que no permitía que el proxy-middleware funcionara. Tan pronto estuve en la red pública, el problema desapareció.

Con grunt-connect + grunt-connect-proxy pude proxy archivos dentro de la red corporativa sin ningún problema.

proxy-middleware implementa su propia funcionalidad de proxy, mientras que grunt-connect-proxy usa http-proxy para hacer el trabajo de proxy real.

Terminé escribiendo un pequeño envoltorio de middleware alrededor de http-proxy para ser utilizado en la sincronización del navegador y en la conexión, lo que resolvió los problemas del proxy en la red corporativa.

https://www.npmjs.com/package/http-proxy-middleware

var browserSync = require(''browser-sync'');
var proxyMiddleware = require(''http-proxy-middleware'');
var proxy = proxyMiddleware(''/ajax'', {target: ''http://cdnjs.cloudflare.com''});
browserSync({
server: {
baseDir: "./",
port: 3000,
middleware: [proxy]
}
});