Gulp livereload is doing nothing

Question

How do I setup gulp live-reload, it doesnt seem to be doing anything.

this is part of my 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()));
});

I've tried gulp connect and gulp live reload with and without tiny-lr.

If it helps, I'm running an apache webserver on a vagrant VM (ubuntu) with host pc windows. VM has static IP of 192.168.33.10.

score 1 · Answer 1 · answered Mar 31 '14 at 22:49

1

You need to fire up a server and have it listening on a port:

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

Then, to notify the server that a file changed (and therefore reload the browser), change your CSS task to the following:

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

answered Mar 31 '14 at 22:49

Ben

10,106
3
40
58

Copied like for like, still no dice. – Kiee Apr 01 '14 at 06:46
I'm using this and it works. Bear in mind that you have to use either the livereload app or browser extension to get this to work in your browser. For Chrome, it's https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en - just start your server and then toggle livereload on in your browser. – Ben Apr 01 '14 at 09:16
I installed the extension, it says its connected, still no changes :( – Kiee Apr 02 '14 at 18:10
1

Gulp has to be called from the host it would appear, I was calling gulp from within the VM (still the same shared folder though) weird. – Kiee Apr 03 '14 at 11:55
May I ask why you have to add it to the stream if you start a server that reloads on file change? Coming from browsersync and having some trouble understanding... – Jimmy Kane Aug 06 '14 at 20:59
Jimmy - the file watching happens in the server's callback function, you have to still pass the paths that changed back to the server so that it can reload them. The server keeps running on that port until you cancel the `gulp watch` task with CTRL + C. – Ben Aug 06 '14 at 21:05

score 0 · Answer 2 · answered Jul 29 '14 at 14:02

Take a look at your files, maybe they are being corrupted when changes occur.

I was with the same problem, when i discovered that my files were being updated perfectly on my host but in the browser they were corrupted, i've started a research about file sync with vagrant.

I've found that the option sendfile need to be off in the webserver.

Just open your server.conf file in your virtual machine and add the options:

For nginx:

sendfile off

For Apache:

EnableSendfile off

I'm using gulp-livereload with chrome livereload plugin, after i've added this option in my webserver everything is working like a charm :)

Here are the sources:

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/

score 0 · Answer 3 · answered Apr 19 '15 at 13:26

Here is a simple and tested livereload solution based on connect server and connect-livereload and gulp-livereload plugins:


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 is doing nothing

3 Answers3