Why gulp-livereload crashes with Error: listen EADDRINUSE?

I use gulp-livereload in my gulpfile.js.

It works fine for CSS files, but crashes for HTML files.

For example, everytime I save index.html, gulp crashes with the error below.

Why is this happening?

DEMO HERE

events.js:72
        throw er; // Unhandled 'error' event
              ^
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 Function.app.listen (/Users/mishamoroshko/github-explorer/node_modules/express/lib/application.js:556:24)
    at Gulp.<anonymous> (/Users/mishamoroshko/github-explorer/gulpfile.js:64:10)
    at module.exports (/Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at /Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/index.js:279:18

I don't understand why you're loading connect-livereload, you can simply use the gulp plugin. Your error may be a conflict with the two, since they use the same ports.

So change your Gulpfile to :

var livereload = require('gulp-livereload');

gulp.task('watch', function() {

  livereload.listen();

  gulp.watch(paths.scripts, ['jshint']).on('change', livereload.changed);
  gulp.watch(paths.styles, ['less']).on('change', livereload.changed);
  gulp.watch(paths.views).on('change', livereload.changed);

});

gulp.task('less', function() {
  return gulp.src('./app/app.less')
    .pipe(less({
      paths: []
    }))
    .pipe(gulp.dest('./app'))
    .pipe(livereload());
});

And remove all the connect-livereload parts.