Question

我正在尝试让gulp.js中的livereload工作。我在浏览器中有livereload扩展。这是我的gulpfile.js。谁能看到任何问题。我尝试了很多变种，并观看了许多视频和教程。我正在运行功放，它是一个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']);
});

Livereload在使用AMPPS和WordPress的gulp.js中无法正常工作

1 个答案: