Livereload 在 gulp 中不起作用.js使用 AMPPS 和 WordPress

Question

我正在尝试在gulp.js中实时加载工作。我的浏览器中有实时加载扩展。这是我的古尔普文件.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']);
});