Problem syntax in Gruntfile.js of chapter 2

tomliao · August 1st, 2015, 12:00 AM

In the "The Connect Task" section in chapter 2, the author shows the second part of the code in Gruntfile.js as:

Code:

      // [2] Arbitrarily named target
      development: {
        // Target options, overrides task options
        options: {
          middleware: function(connect) {
            return [
              connect.static('app')
            ];
          }
        }
      }
    }

However, when I ran the command "grunt" from command-line, I got a warning saying "Warning: undefined is not a function Use --force to continue." and the program stopped. Then I used "grunt --verbose" command trying to start the program, I can see "middleware=undefined" in the output.

As of this writing, I found a solution to fix the problem. I changed the whole part of middleware code into:

Code:

base: 'app'

, and it worked.

What I don't understand are:

1. Why the original code returned as undefined?

2. As the author mentioned in the book,

Quote:

Because your application files reside inside the app/ directory, you need to tell your development target to serve static assets from that location. You accomplish this be setting the middleware property....

. If all we need is just to let our program to start from the app directory, the base option can provide the same functionality, then why we use middleware instead of base?

Update (solution found):
Just found out why my middleware function is returned as undefined, it was due to that "static" is no longer a part of Connect module. If one wants to use connect.static function, should install "serve-static", and then declare a variable to require serve-static. What I did for the above code after installing serve-static was:

Code:

// Declare a variable to require serve-static, and I declare it outside the gult.initConfig function
var serveStatic = require('serve-static');
.....
.....
      // [2] Arbitrarily named target
      development: {
        // Target options, overrides task options
        options: {
          middleware: function(connect) {
            return [
              serveStatic('app')
            ];
          }
        }
      }
    }

njho · January 26th, 2016, 03:30 PM

Thanks!

natMille · March 9th, 2016, 02:41 PM

I got it thanks to this!!!

thanks again!

natMille · March 10th, 2016, 11:18 AM

Hello,

Just thought I would add that getting the gulp to work is very similar to the suggestions here for the grunt.

Code:

 // [2] Load plug-ins
var $ = require('gulp-load-plugins') ();
//declare the serveStatic variable as you did in the grunt
var serveStatic = require('serve-static');

...
...
...

then

Code:

 // 'connect' task for starting web server
gulp.task('connect', function () {
  var connect = require('connect');
  var app = connect()
    .use(require('connect-livereload') ({ port: 35729 }))
    .use(serveStatic('app')); 
 // .use(serveStatic.directory('app')); 
//the serveStatic.directory line above is not needed comment out or delete it

after doing this my server connected successfully showing the correct formatting and dynamically updating

hope this is helpful

koosha_pooyeshgar · October 5th, 2016, 11:21 AM

thank u so much