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

Posted 2023-02-25

【中文标题】Livereload 在 AMPPS 和 WordPress 中无法在 gulp.js 中工作

【英文标题】：Livereload not working in gulp.js with AMPPS and WordPress

【发布时间】：2015-01-15 05:37:04

【问题描述】：

我正在尝试让 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']);

【参考方案1】：

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

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

【讨论】：

谢谢...会尝试一下...对那里的 ['less'] 有点困惑我不使用 less（但是）它只是为了 css 更改我想得到这个开始工作。想知道是gulp.watch('style.css', ['styles']);

非常感谢...我编辑了我的问题以包含您的代码供其他人使用。

是的，抱歉提示错误：我打算更新从插件文档中复制的片段，但我忘记了。我很高兴你明白了。快乐的吞咽！