Livereload 在 AMPPS 和 WordPress 中无法在 gulp.js 中工作

Question

我正在尝试让 livereload 在 gulp.js 中工作。我的浏览器中有 livereload 扩展。这是我的 gulpfile.js。任何人都可以看到任何问题。我尝试了许多变体并观看了许多视频和教程。我正在运行 ampps，这是一个 wordpress 安装

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']);

.. ..

编辑： 对于任何对完成的文件感兴趣的人，我在 Ghidello 的以下回答的帮助下最终完成了工作：

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 是 tiny-lr 包的包装，因此您不需要同时使用它们。默认情况下，它使用您使用的相同端口，因此，根据其文档页面，您可以完全摆脱 tiny-lr 并将您的监视步骤更改为以下内容：

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