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

Question

I am trying to configure the grunt connect such a way that
For static pages it serves pages from src directory
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/john#gmail.com": {"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
}];}