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 任务，但是当您更改 时，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')就可以了。