gulp live reload config

Question

Hello I try to create my own config. and its much working well but some times i when i change html code live reload is not working dont know why. Any one can help with that?

var livereload = require('gulp-livereload');
gulp.task('reload-html',function(){
    gulp.src('./*.html')
        .pipe(livereload())
        .pipe(notify({ message: 'Reload html task complete' }));
});

gulp.task('watch-files',function(){
    livereload.listen();
    gulp.watch('*.html',['reload-html'])
    gulp.watch('assets/sass/**/*.scss',['sass']);
    gulp.watch('assets/images/src/**/*',['images-min']);
});

Also I use live reload plugin for google chrome.

score 0 · Answer 1 · answered Apr 20 '15 at 16:27

why you don't simply use gulp-connect?

Here's a pretty simple sample:

'use strict';

var gulp    = require('gulp');

// Files to be considered on live reload
var files   = ['index.html', 'style.css' ];

var connect = require('gulp-connect'); 

gulp.task('files', function() {
  gulp.src(files).pipe(connect.reload());
});

gulp.task('watch', function() {
  gulp.watch(files, ['files']);
});

gulp.task('connect', function() {
  // Default port: 8000
  connect.server({livereload: true});
});

gulp.task('default', ['connect', 'watch']);

With that you don't need any Chrome Plugin. Here is the Gist.

score 0 · Answer 2 · answered Apr 20 '15 at 16:41

Thought this is not a solution to your problem this is an alternate to using Live-reload.

Browser-sync is a very powerful tool that does what Livereload does and much more.

Below is a simple gulp[ task for browser-sync:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// or...

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "yourlocal.dev"
    });
});

More about browser-sync at:
http://www.browsersync.io/

gulp live reload config

2 Answers2