Gulp-connect 显示错误 'listen EADDRINUSE'

Question

我有一个简单的 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']);

Answer 1

EADDRINUSE 表示该端口已在使用中。

在下面的代码中，您正在调用 default 中的 connect 任务，但是当您更改 .sass 文件时，它会再次调用 connect。

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!
    });
...

所以你基本上是在尝试监听你正在使用的同一个端口，给你这个错误。

删除watchs 中的gulp.run('connect') 就可以了。