使用 gulp 提供静态文件时出现 TypeError
TypeError when using gulp to serve static files
我在请求 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"
}
}
这是树视图
.
|-- 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
server-static
和 serve-index
不再是 connect
的一部分。它们被提取为单独的模块。您包含了这些单独的模块,因此只需使用:
.use(serveStatic('app'))
.use(serveIndex('app'));
我在请求 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"
}
}
这是树视图
.
|-- 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
server-static
和 serve-index
不再是 connect
的一部分。它们被提取为单独的模块。您包含了这些单独的模块,因此只需使用:
.use(serveStatic('app'))
.use(serveIndex('app'));