0

我正在关注 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 %>'
    }
  }
},

任何帮助，将不胜感激！

4

1 回答 1

1

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

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

我对 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'))
于 2015-10-09T14:16:11.880 回答