javascript - 使用 gulp 提供静态文件时出现类型错误

Question

当请求 Gulp 提供静态内容并加载网络服务器时，我收到以下错误。我正在关注专业的 AngularJS 书籍。 package.json 和 gulpfile 都位于同一文件夹中。

[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

下面是我的 Gulp 代码

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');
    });
});

和我的 package.json 文件

{
  "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"
  }
}

这是 TreeView

.
|-- 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 和 serve-index 不再是 connect 的一部分。它们被提取为单独的模块。您已包含这些单独的模块，因此只需使用:

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