gulp-connect-proxy里面声明proxy会报错

问题描述

问 题

我用gulp搭建了一个应用，现在需要进行跨域访问，于是用上了gulp-connect-proxy，但是这个包已经有一年没有更新了，参照作者的demo在Connect.middleware里面声明了一个proxy就会报语法错误，由于本人水平有限，通过阅读源码也无法解决问题，故在此求助。gulpfile.js代码如下：

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

var path = require('path');
var gls = require('gulp-live-server');

var connect = require('gulp-connect'),
    Proxy = require('gulp-connect-proxy'),
    server = gls.static('static', 1989);

/************* less to css  ********************/
var lessPath = [path.join(__dirname, 'static', 'less', 'includes'),
                path.join(__dirname, 'static', 'less', 'components')];

function less2css(srcPath, destPath, debug) {
  if(!debug) {
    return gulp.src(srcPath)
      .pipe(plugins.less({ paths: lessPath }))
      .pipe(plugins.minifyCss({ compatibility: 'ie9' }))
      .pipe(gulp.dest(destPath));
  } else {
    return gulp.src(srcPath)
      .pipe(plugins.sourcemaps.init())
      .pipe(plugins.less({ paths: lessPath }))
      .pipe(plugins.sourcemaps.write())
      .pipe(gulp.dest(destPath));
  }
}

gulp.task('less', function () {
  less2css('./static/less/*.less', './static/css');
});

gulp.task('less-debug', function () {
  less2css('./static/less/*.less', './static/css', true);
});

/************** Static assets **************/
gulp.task('static', function () {
  return gulp.src('./static/**/*', { base: 'static' })
    .pipe(gulp.dest('./dist/static/'));
});

/****************** Watch ****************/
gulp.task('watch', ['server'], function () {
  gulp.watch('./static/**/*', ['static']);
  gulp.watch('./static/**/*.less', ['less-debug']);
  gulp.watch('./dist/**/*', function () {
    server.notify.apply(server, arguments);
  });
});

/****************** Build ****************/
gulp.task('build', ['less-debug', 'static']);
gulp.task('build-for-deploy', ['less', 'static']);

/****************** Server ****************/
//gulp.task('serve', function () {
//  server.start();
//});
gulp.task('connect', function () {
  connect.server({
    root: 'app',
    port: 1989,
    livereload: true,
    middleware: function (connect, opt) {
      opt.route = '/proxy',
      var proxy = new Proxy(opt);
      return [proxy];
    }
  });
});

gulp.task('server', ['build', 'connect']);
gulp.task('preview', ['build-for-deploy', 'connect']);

/****************** Deploy ****************/
gulp.task('deploy', ['build-for-deploy'], function () {
  return gulp.src('./dist/**/*')
    .pipe(plugins.ghPages());
});

/****************** Default ****************/
gulp.task('default', ['server', 'watch']);

错误信息如下：

gulp-connect-proxy 的源码如下：

var url    = require('url');
var http   = require('http');
var fs     = require('fs');
var path   = require('path');
var extend = require('extend');


function proxyRequest (localRequest, localResponse, next) {

  var options = url.parse('http://' + localRequest.url.slice(1));

  http.request(options, function (remoteRequest) {
    if (remoteRequest.statusCode === 200) {
      localResponse.writeHead(200, {
          'Content-Type': remoteRequest.headers['content-type']
      });
      remoteRequest.pipe(localResponse);
    } else {
      localResponse.writeHead(remoteRequest.statusCode);
      localResponse.end();
    }
  }).on('error', function(e) {
    next();
  }).end();
};

function Proxy (options) {
  var config = extend({}, {
    route: ''
  }, options);

  return function (localRequest, localResponse, next) {
    if (typeof config.root === 'string') {
      config.root = [config.root]
    } else if (!Array.isArray(config.root)) {
      throw new Error('No root specified')
    }

    var pathChecks = []
    config.root.forEach(function(root, i) {
      var p = path.resolve(root)+localRequest.url;

      fs.access(p, function(err) {
        pathChecks.push(err ? false : true)
        if (config.root.length == ++i) {
          var pathExists = pathChecks.some(function (p) {
            return p;
          });
          if (pathExists) {
            next();
          } else {
            if (localRequest.url.slice(0, config.route.length) === config.route) {
              localRequest.url = localRequest.url.slice(config.route.length);
              proxyRequest(localRequest, localResponse, next);
            } else {
              return next();
            }
          }
        }
      });
    })
  }
}

module.exports = Proxy;

参考代码：
gulp-connect 的地址：https://github.com/AveVlad/gulp-connect
gulp-connect-proxy 的地址：https://github.com/chrishoage/gulp-connect-proxy

ths:)

解决方案

例子不见得有错，不过你代码写错是真的，仔细看我的注释：

gulp.task('connect', function () {
  connect.server({
    root: 'app',
    port: 1989,
    livereload: true,
    middleware: function (connect, opt) {
      opt.route = '/proxy';//这里不是逗号，是分号
      var proxy = new Proxy(opt);
      return [proxy];
    }
  });
});

这篇关于gulp-connect-proxy里面声明proxy会报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！