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表示该端口已在使用中。

在下面的代码中，您正在调用connect中的default任务，但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!
    });
...

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

移除gulp.run('connect')内的watch，您就可以了。

Gulp-connect显示错误＆＃39;听EADDRINUSE＆＃39;

1 个答案: