Duplicate data property in object literal not allowed in strict mode grunt-connect-proxy

I'm following a tutorial from Tutsplus which titles "Hands on Angularjs", in the tutorial the instructor uses the grunt-connect-proxy package for redirecting ajax requests to rails server running on localhost:3000, but I think the tutorial is old and on that particular version grunt-contrib-connect package's livereload plugin didn't used the middleware function and now on the current version livereload uses middleware which leads me to the error:

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

This is the grunt file task

// 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 %>'
    }
  }
},

Any help would be appreciated!

The error you are getting is a jslint error. It states what the problem is - you cannot use duplicate data properties in an object literal.

In your gruntfile you have a task that has duplicate properties called middleware within the livereload options. So you need to include any middleware code within the one property.

I'm not totally familiar with livereload but you should be able to put all of your middleware code for livereload into the one method. It also looks like middlewares.push(connect.static(base)); does everything the second duplicate middleware method is doing.

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;
      },
    }
  }

If you find that some static assets are missing you can push these to the middlewares array:

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