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