Vagrant 大口利弗雷罗德什么也没做

如何设置gulp live reload，它似乎没有任何作用

这是我的gulpfile的一部分：

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

gulp.task('css', function(){
         gulp.src(sassdir)
        .pipe(sass({style:'compressed'}))
        .pipe(prefix('last 4 version'))
        .pipe(gulp.dest(cssdir))
        .pipe(livereload(lr()));
});

我试过在有或没有小lr的情况下使用gulp connect和gulp live reload

---

如果有帮助的话，我正在一个带有主机pc windows的vagrant VM（ubuntu）上运行apache Web服务器。VM的静态IP为192.168.33.10。

您需要启动服务器并让它在端口上侦听：

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

gulp.task('watch', function() {
    server.listen(35729, function(err) {
        if (err) {
            return gutil.log(err);
        }
        gulp.watch(sassdir, ['css']);
        gutil.log('Watching source files for changes... Press ' + gutil.colors.cyan('CTRL + C') + ' to stop.');
    })
});

然后，要通知服务器文件已更改（从而重新加载浏览器），请将CSS任务更改为以下内容：

gulp.task('css', function(){
    return gulp.src(sassdir)
        .pipe(sass({style:'compressed'}))
        .pipe(prefix('last 4 version'))
        .pipe(gulp.dest(cssdir))
        .pipe(livereload(server));
});

---

查看您的文件，当发生更改时，它们可能正被损坏

我也有同样的问题，当我发现我的文件在我的主机上被完美地更新了，但在浏览器中它们被破坏了，我已经开始研究与vagrant的文件同步

我发现Web服务器中的sendfile选项需要关闭

只需在虚拟机中打开server.conf文件并添加选项：

对于nginx:

sendfile off

EnableSendfile off

对于Apache:

sendfile off

EnableSendfile off

我在chrome livereload插件中使用gulp livereload，在我的Web服务器中添加此选项后，一切都像一个符咒一样工作：）

以下是资料来源：

这里是一个基于

connect

服务器和

connect-livereload

和

gulp-livereload

插件的：

var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});

---

一个接一个的复制，还是没有骰子。我用这个，它很有效。请记住，您必须使用livereload应用程序或浏览器扩展才能在浏览器中运行此功能。对于Chrome，它是-只需启动你的服务器，然后在浏览器中打开livereload。我安装了扩展，它说它已连接，仍然没有更改：（必须从显示的主机调用Gulp，我从VM中调用Gulp（尽管仍然是同一个共享文件夹）奇怪。我可以问一下，如果你启动了一个服务器，重新加载文件更改，为什么要将它添加到流中？来自browsersync，理解起来有点困难。。。