CODEWITHSUNDEEP
vagrantgulplivereload
Kiee
Kiee

Reputation: 10771

Gulp livereload is doing nothing

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.

Upvotes: 4

Views: 2460

Answers (3)

Dmitri Zaitsev
Dmitri Zaitsev

Reputation: 14056

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

Upvotes: 0

Thiago
Thiago

Reputation: 160

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/

Upvotes: 0

Ben
Ben

Reputation: 10156

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

Upvotes: 1

Related Questions