grunt-contrib-connect - undefined is not a function for connect.static

Question

I am trying to configure the grunt connect such a way that

1. For static pages it serves pages from src directory
2. web service calls are intercepted by middle-ware and static json is served.

While the web service calls are being mocked correctly the connect.static call ends up giving an error

TypeError: undefined is not a function

While I realize that the connect.static was provided in later versions of this module, I have already upgraded to a version later than that

Here is my package.json file

{
  "name": "my-angular-seed-project",
  "version": "1.0.0",
  "description": "angular seed with only bower and grunt",
  "main": "index.js",
  "dependencies": {
  },
  "devDependencies": {
    "bower": "^1.4.1",
    "grunt": "^0.4.5",
    "grunt-cli": "^0.1.13",
    "grunt-contrib-connect": ">=0.10.0",
    "grunt-contrib-jshint": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "jshint-stylish": "^2.0.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Here is the gruntfile.js

// Gruntfile.js

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

    var restEndPoints = {
        "/restapi/users": {"GET":"json-files/users.get.json"},
        "/restapi/users/login": {"GET":"json-files/users.get.json"},
        "/restapi/users/[email protected]": {"GET":"json-files/users.get.john.json"},
        "/restapi/nodes": {"GET":"json-files/nodes.get.json","PUT":"json-files/nodes.put.json","POST":"json-files/nodes.put.json"},
        "/restapi/nodes/Node1": {"GET":"json-files/nodes.get.node1.json","DELETE":"json-files/nodes.delete.node1.json"},
        "/restapi/services": {"GET":"json-files/services.get.json","PUT":"json-files/services.put.json","POST":"json-files/services.put.json"},
        "/restapi/services/nginx": {"GET":"json-files/services.get.nginx.json","DELETE":"json-files/services.delete.nginx.json"},
        "/restapi/commands": {"GET":"json-files/commands.get.json","PUT":"json-files/commands.put.json","POST":"json-files/commands.put.json"},
        "/restapi/commands/pwd": {"GET":"json-files/commands.get.pwd.json","DELETE":"json-files/commands.delete.pwd.json"}
    };

    String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;};



  // ===========================================================================
  // CONFIGURE GRUNT ===========================================================
  // ===========================================================================
  grunt.initConfig({

    // get the configuration info from package.json ----------------------------
    // this way we can use things like name and version (pkg.name)
    pkg: grunt.file.readJSON('package.json'),

    // all of our configuration will go here
        watch: {

        },
    // configure jshint to validate js files -----------------------------------
        jshint: {
          options: {
            reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
          },

          // when this task is run, lint the Gruntfile and all js files in src
          build: ['Gruntfile.js', 'src/**/*.js']
        },  

    // configure connect to run server (on test/serve or example)
      connect: {
        server: {
          options: {
            port : 8000,
            hostname : 'localhost',
            base : 'src',
            middleware: function (connect,options){return [
                //Middleware #1 - for rest api calls
              function restapiMiddleware(req, res, next) {
                  if (req.url.indexOf('restapi') > 0){
                    console.log(req.method+' request received for webservice api ['+req.url+']');

                    var match = false;
                    var json_file_to_serve = "";
                    var keys = Object.keys(restEndPoints);
                    keys.forEach(function(urlAsKey) {
                        if (req.url.endsWith(urlAsKey)) {
                            Object.keys(restEndPoints[urlAsKey]).forEach(function(httpMethodsAsKey) {
                                if (req.method == httpMethodsAsKey){
                                        match = true;
                                        json_file_to_serve = restEndPoints[urlAsKey][httpMethodsAsKey];
                                }
                            }); //forEach ends
                        }
                    }); //forEach ends

                    //no match with the url, move along
                    if (match == false) {
                        return next();
                    }
                    if (req.url.endsWith('/login')){
                    res.writeHead(200, { 'user-auth-token':'56f7997504b352cbf6ba6210409e423f5fdac49a','user-enc-email':'lJUXityStsKko/lPr9eJUc5fLFCV5kFm' });
                    }
                    //Finalize this response with json file
                    res.end(grunt.file.read(json_file_to_serve));

                // if not restapi call then goto next middleware
                // can we serve static right here ? 
                }else{
                    return next();
                }
              } // element/middleware one ends so comma just json objects this is awesome
              ,
              //Middleware #2 for static page calls
              function staticMiddleware(connect,options) {
                connect.static(options.base);
                //connect.static('src');
              }
            ] // array ends
            }
          }
        }
      }





  });

  // ===========================================================================
  // LOAD GRUNT PLUGINS ========================================================
  // ===========================================================================
  // we can only load these if they are in our package.json
  // make sure you have run npm install so our app can find these
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');

    //register the task
    grunt.registerTask('serve', ['connect', 'watch']);


};

Am I missing something trivial here ?

Answer 1

Thanks @R4c00n & @Christian Fritz, I was going through the gruntfile of the grunt-contrib-connect and it uses the serveStatic call instead of connect.static and yes the module serve-static is part of grunt contrib connect's node_modules. So now a serveStatic(base.options) does wire the static files as well. Here is the updated grunt file section (the serve static call has to be first though)

    middleware: function (connect,options){return [
      //statically serve pages from src directory
      serveStatic('src'),

      //Middleware #1 - for rest api calls
      function restapiMiddleware(req, res, next) {
                   // middleware code
      }];}