Question

我正在关注Tutsplus的教程“Hands on Angularjs”，教程中教师使用grunt-connect-proxy包将ajax请求重定向到localhost：3000上运行的rails服务器，但我认为教程是旧的，在特定版本上grunt-contrib-connect包的livereload插件没有使用中间件功能，现在在当前版本livereload使用中间件导致我出错：

>> SyntaxError: /Applications/MAMP/htdocs/savage-worlds/Gruntfile.js:113
>>           middleware: function (connect) {
>>           ^^^^^^^^^^
>> Duplicate data property in object literal not allowed in strict mode

这是grunt文件任务

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  proxies: [
    {
      context: '/api',
      host: 'localhost',
      port: 3000
    }
  ],
  livereload: {
    options: {
        middleware: function (connect, options) {
          if (!Array.isArray(options.base)) {
              options.base = [options.base];
          }

          // Setup the proxy
          var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

          // Serve static files.
          options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
          });

          // Make directory browse-able.
          var directory = options.directory || options.base[options.base.length - 1];
          middlewares.push(connect.directory(directory));

          return middlewares;
      },
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  dist: {
    options: {
      open: true,
      base: '<%= yeoman.dist %>'
    }
  }
},

任何帮助将不胜感激！

Answer 1

您获得的错误是jslint错误。它说明了问题所在 - 您不能在对象文字中使用重复的数据属性。

在你的gruntfile中，你有一个任务，在livereload选项中有一个名为middleware的重复属性。因此，您需要在一个属性中包含任何中间件代码。

我并不完全熟悉livereload，但您应该能够将所有用于livereload的中间件代码放入一个方法中。它看起来像middlewares.push(connect.static(base));执行第二个重复的中间件方法正在做的所有事情。

livereload: {
    options: {
        middleware: function (connect, options) {
          if (!Array.isArray(options.base)) {
              options.base = [options.base];
          }

          // Setup the proxy
          var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

          // Serve static files.
          options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
          });

          // Make directory browse-able.
          var directory = options.directory || options.base[options.base.length - 1];
          middlewares.push(connect.directory(directory));

          return middlewares;
      },
    }
  }

如果您发现缺少某些静态资产，可以将它们推送到middlewares数组：

middlewares.push((connect.static('./bower_components'))

严格模式grunt-connect-proxy中不允许对象文字中的重复数据属性

1 个答案: