vagrant - Gulp livereload 什么都不做

Question

我如何设置 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()));
});

我试过 gulp connect 和 gulp live reload 有和没有 tiny-lr。

如果有帮助，我将在带有主机 pc windows 的 vagrant VM (ubuntu) 上运行 apache 网络服务器。 VM 的静态 IP 为 192.168.33.10。

Answer 1

你需要启动一个服务器并让它监听一个端口:

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));
});