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 with have和without tiny-lr。

如果有帮助，我在带有主机PC窗口的流浪汉VM（ubuntu）上运行apache webserver。 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));
});

Answer 2

查看您的文件，可能会在发生更改时已损坏。

我遇到同样的问题，当我发现我的文件在我的主机上完美更新但在浏览器中它们已损坏时，我开始研究与流浪者进行文件同步。

我发现在网络服务器中需要关闭选项sendfile。

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

对于nginx：

sendfile off

对于Apache：

EnableSendfile off

我正在使用带有chrome livereload插件的gulp-livereload，在我的网络服务器中添加此选项之后，所有内容都像魅力一样：）

以下是来源：

http://jeremyfelt.com/code/2013/01/08/clear-nginx-cache-in-vagrant/ http://www.mabishu.com/blog/2013/05/07/solving-caching-issues-with-vagrant-on-vboxsf/

Answer 3

以下是基于connect服务器以及connect-livereload和gulp-livereload插件的simple and tested livereload solution：


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

Gulp livereload什么都不做

3 个答案: