使用gulp提供静态文件时出现TypeError

Question

I'm getting the below error when requesting Gulp to serve static content and load the webserver. I'm following the professional angularJS book. both the package.json and the gulpfile reside in the same folder.

[21:30:44] Using gulpfile ~/Desktop/pro-angular2/gulpfile.js
[21:30:44] Starting 'connect'...
[21:30:44] 'connect' errored after 96 ms
[21:30:44] TypeError: undefined is not a function
    at Gulp.<anonymous> (/home/kj/Desktop/pro-angular2/gulpfile.js:17:18)
    at module.exports (/home/kj/Desktop/pro-angular2/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/kj/Desktop/pro-angular2/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/kj/Desktop/pro-angular2/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/kj/Desktop/pro-angular2/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

below is my Gulp code

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

gulp.task('default',[],function(){

});

gulp.task('connect', function() {
  var serveStatic = require('serve-static');
  var serveIndex = require('serve-index');
  var connect = require('connect');
  var app = connect()
    .use(require('connect-livereload')({
      port: 35729
    }))
    .use(connect.serveStatic('app'))
    .use(connect.serveIndex('app'));
  require('http').createServer(app)
    .listen(9000)
    .on('listening', function() {
      console.log('Started connect web server on http://localhost:9000');
    });
});

and my package.json file

{
  "name": "pro-angular2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "connect": "^3.4.0",
    "connect-livereload": "^0.5.4",
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^0.11.2",
    "grunt-contrib-jshint": "^0.11.3",
    "grunt-contrib-less": "^1.1.0",
    "grunt-contrib-watch": "^0.6.1",
    "gulp": "^3.9.0",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^1.1.0",
    "jshint": "^2.8.0",
    "load-grunt-tasks": "^3.3.0",
    "opn": "^3.0.3"
  }
}

This is the tree view

.
|-- app
|   |-- app.js
|   |-- bower_components
|   |-- index.html
|   |-- main.css
|   `-- main.less
|-- bower.json
|-- gruntfile.js
|-- gulpfile.js
|-- node_modules
|   |-- connect
|   |-- connect-livereload
|   |-- grunt
|   |-- grunt-contrib-connect
|   |-- grunt-contrib-jshint
|   |-- grunt-contrib-less
|   |-- grunt-contrib-watch
|   |-- gulp
|   |-- gulp-jshint
|   |-- gulp-less
|   |-- gulp-livereload
|   |-- gulp-load-plugins
|   |-- jshint
|   |-- load-grunt-tasks
|   |-- opn
|   |-- serve-index
|   `-- serve-static
`-- package.json

Answer 1

server-static and serve-index are not part of connect anymore. They were extracted as separate modules. You have these separate modules included, so just use:

.use(serveStatic('app'))
.use(serveIndex('app'));