Gulp-连接显示错误'listen EADDRINUSE'
Gulp-connect shows an error 'listen EADDRINUSE'
我有一个简单的gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var notify = require("gulp-notify");
var pngquant = require('imagemin-pngquant');
gulp.task('connect', function() {
connect.server({
root: ['./'],
livereload: true
});
});
gulp.task('sass', function() {
gulp.src(['css/**/*.scss'])
.pipe(sass({
errLogToConsole: false,
onError: function(err) {
return notify().write(err);
}
}))
.pipe(gulp.dest('build'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(connect.reload());
})
gulp.task('imagemin', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images/'));
});
gulp.task('default', function() {
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
gulp.run('connect');
})
gulp.watch('*.html', function(event) {
gulp.run('connect');
})
gulp.watch('src/images/*', function(event) {
gulp.run('imagemin');
})
})
gulp.task('start', ['connect']);
Livereload 服务器工作正常。但是,当我尝试编辑 scss 或 index.html 文件时,出现以下错误:
events.js:72
throw er; // Unhandled 'error'
^
Error: listen EADDRINUSE
at errnoException (net.js:904:11)
at Server._listen2 (net.js:1042:14)
at listen (net.js:1064:10)
at Server.listen (net.js:1138:5)
at ConnectApp.server (C:\xampp\htdo
ex.js:57:19)
at new ConnectApp (C:\xampp\htdocs\
js:37:10)
at Object.module.exports.server (C:
connect\index.js:170:12)
at Gulp.gulp.task.gulp.src.pipe.pip
smi2.0\gulpfile.js:10:11)
at module.exports (C:\xampp\htdocs\
rchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\x
de_modules\orchestrator\index.js:273:3)
没有 gulp-connect 一切正常。我确定 gulpfile.js 中存在一个小的语法错误,但我找不到它。请帮忙解决这个问题。
这是最终的 gulpgile.js 效果比@Rigotti 还好:
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var notify = require("gulp-notify");
var pngquant = require('imagemin-pngquant');
gulp.task('connect', function() {
connect.server({
root: ['./'],
livereload: true
});
});
gulp.task('sass', function() {
gulp.src(['css/**/*.scss'])
.pipe(sass({
errLogToConsole: false,
onError: function(err) {
return notify().write(err);
}
}))
.pipe(gulp.dest('build'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(connect.reload());
})
gulp.task('imagemin', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images/'));
});
gulp.task('html', function () {
gulp.src('index.html')
.pipe(connect.reload());
});
gulp.task('default', function() {
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
})
gulp.watch('*.html', function(event) {
gulp.run('html');
})
gulp.watch('src/images/*', function(event) {
gulp.run('imagemin');
})
})
gulp.task('start', ['connect']);
EADDRINUSE 表示该端口已被使用。
在下面的代码中,您在 default
中调用 connect
任务,但是 connect
当您更改 .sass
文件时它会再次调用。
gulp.task('default', function() {
// server started
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
gulp.run('connect'); // <-- problem! connect is already running!
});
...
所以你基本上是在尝试监听你正在使用的同一个端口,给你这个错误。
删除 watch
中的 gulp.run('connect')
就可以了。
我有一个简单的gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var notify = require("gulp-notify");
var pngquant = require('imagemin-pngquant');
gulp.task('connect', function() {
connect.server({
root: ['./'],
livereload: true
});
});
gulp.task('sass', function() {
gulp.src(['css/**/*.scss'])
.pipe(sass({
errLogToConsole: false,
onError: function(err) {
return notify().write(err);
}
}))
.pipe(gulp.dest('build'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(connect.reload());
})
gulp.task('imagemin', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images/'));
});
gulp.task('default', function() {
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
gulp.run('connect');
})
gulp.watch('*.html', function(event) {
gulp.run('connect');
})
gulp.watch('src/images/*', function(event) {
gulp.run('imagemin');
})
})
gulp.task('start', ['connect']);
Livereload 服务器工作正常。但是,当我尝试编辑 scss 或 index.html 文件时,出现以下错误:
events.js:72
throw er; // Unhandled 'error'
^
Error: listen EADDRINUSE
at errnoException (net.js:904:11)
at Server._listen2 (net.js:1042:14)
at listen (net.js:1064:10)
at Server.listen (net.js:1138:5)
at ConnectApp.server (C:\xampp\htdo
ex.js:57:19)
at new ConnectApp (C:\xampp\htdocs\
js:37:10)
at Object.module.exports.server (C:
connect\index.js:170:12)
at Gulp.gulp.task.gulp.src.pipe.pip
smi2.0\gulpfile.js:10:11)
at module.exports (C:\xampp\htdocs\
rchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\x
de_modules\orchestrator\index.js:273:3)
没有 gulp-connect 一切正常。我确定 gulpfile.js 中存在一个小的语法错误,但我找不到它。请帮忙解决这个问题。
这是最终的 gulpgile.js 效果比@Rigotti 还好:
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var notify = require("gulp-notify");
var pngquant = require('imagemin-pngquant');
gulp.task('connect', function() {
connect.server({
root: ['./'],
livereload: true
});
});
gulp.task('sass', function() {
gulp.src(['css/**/*.scss'])
.pipe(sass({
errLogToConsole: false,
onError: function(err) {
return notify().write(err);
}
}))
.pipe(gulp.dest('build'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(connect.reload());
})
gulp.task('imagemin', function () {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images/'));
});
gulp.task('html', function () {
gulp.src('index.html')
.pipe(connect.reload());
});
gulp.task('default', function() {
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
})
gulp.watch('*.html', function(event) {
gulp.run('html');
})
gulp.watch('src/images/*', function(event) {
gulp.run('imagemin');
})
})
gulp.task('start', ['connect']);
EADDRINUSE 表示该端口已被使用。
在下面的代码中,您在 default
中调用 connect
任务,但是 connect
当您更改 .sass
文件时它会再次调用。
gulp.task('default', function() {
// server started
gulp.run('connect', 'sass', 'imagemin');
gulp.watch('css/**', function(event) {
gulp.run('sass');
gulp.run('connect'); // <-- problem! connect is already running!
});
...
所以你基本上是在尝试监听你正在使用的同一个端口,给你这个错误。
删除 watch
中的 gulp.run('connect')
就可以了。