Livereload not working in gulp.js with AMPPS and WordPress

Question

I am trying to get livereload working in gulp.js. I have the livereload extenstion in my browser. This is my gulpfile.js. Can anyone see any problems. I have tried many variants and watched many videos and tutorials. I am running ampps and it's a wordpress installation

var gulp = require('gulp'),
    livereload = require('gulp-livereload');
    lr = require('tiny-lr');
    server = lr();


gulp.task('styles', function() {
  return gulp.src('style.css')
    .pipe(livereload(server))
    .pipe(gulp.dest('./'))
});



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


 //  // Listen on port 35729
  server.listen(35729, function (err) {
    if (err) {
      return console.log(err)
    };

    // Watch .scss files
    gulp.watch('style.css', ['styles']);

  });

});

// Default task
gulp.task('default', ['styles', 'watch']);

.. ..

EDIT: for anyone interested the finished file I got working in the end with help from Ghidello's answer below was:

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


gulp.task('styles', function() {
  return gulp.src('style.css')
    .pipe(livereload())
});

// Watch
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('style.css', ['styles']);
});

// Default task
gulp.task('default', ['styles', 'watch']);

Answer 1

gulp-livereload is a wrapper around the tiny-lr package so you don't need to use them both. It uses the same port you're using by default so, accordingly to its documentation page, you can get rid of tiny-lr completely and change your watch step to something like this:

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('build/**', ['less']);
});