Livereload of index.html with Gulp

Question

I am attempting to have my browser update when I make a change to index.html in the root of my project. Livereloading is working fine when updating the CSS. I have removed the efforts I made to get this working in my gulpfile.js, below...

Thanks!

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();

gulp.task('styles', function() {
return gulp.src('components/sass/style.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6',         'android 4'))
.pipe(gulp.dest(''))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(''))
.pipe(livereload(server))
.pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('scripts', function() {
return gulp.src('components/js/*.js')
// .pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'))
.pipe(livereload(server))
.pipe(notify({ message: 'Scripts task complete' }));

});

gulp.task('images', function() {
return gulp.src('components/img/*')
.pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
.pipe(gulp.dest('img'))
.pipe(livereload(server))
.pipe(notify({ message: 'Images task complete' }));
});

// gulp.task('clean', function() {
//   return gulp.src(['css', 'js', 'img'], {read: false})
//     .pipe(clean());
// });

gulp.task('watch', function() {

server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
// Watch .scss files
gulp.watch('components/sass/*.scss', ['styles']);
// Watch .js files
gulp.watch('components/js/*.js', ['scripts']);
// Watch image files
gulp.watch('components/img/*', ['images']);
});    
});

// gulp.task('default', ['clean'], function() {
gulp.task('default', function() {
gulp.start('styles', 'scripts', 'images');
});

Chymotrypsin

Answer 1

There may be a better way to do what you want to do.

Have you thought about maybe using an instance of express with livereload?

The alternative is to use gulp-connect which will make what you're trying to do much easier. In either case, instead of invoking livereload within tasks, handle livereloading within the task that sets up your server. The general idea is that you set a watch task on your files that you want livereloading and then reload on changes.

gulp.task('serve', function(event) {
    connect.server({
        root: destinations.docs,
        port: 1987,
        livereload: true
    });
    // sets up a livereload that watches for any changes in the root
    watch({glob: [sources.html, sources.styles]})
        .pipe(connect.reload());
});

I've experimented with both ways and gulp-connect is a much easier option. Regardless, I've written two gulp boilerplates which you can see at https://github.com/jh3y/gulp-boilerplate-v2 and https://github.com/jh3y/gulp-boilerplate .

Hope that helps!

Overweight

Answer 2

You can try to put put your html files into a subfolder like components/html and use a task similar to the styles task:

gulp.task('html', function() {
    return gulp.src('components/html/**/*.html')
        .pipe(gulp.dest(''))
        .pipe(livereload(server))
        .pipe(notify({ message: 'HTML task complete' }));
});

Your default task should look like:

// gulp.task('default', ['clean'], function() {
gulp.task('default', function() {
    gulp.start('styles', 'scripts', 'images', 'html');
});

And modify your watch task:

gulp.task('watch', function() {

    server.listen(35729, function (err) {
        if (err) {
            return console.log(err)
        };
        // Watch .scss files
        gulp.watch('components/sass/*.scss', ['styles']);
        // Watch .js files
        gulp.watch('components/js/*.js', ['scripts']);
        // Watch image files
        gulp.watch('components/img/*', ['images']);
        // Watch html files
        gulp.watch('components/html/**/*.html', ['html']);
    });
});

Ciao Ralf

Chapnick

It works for me but all html files are reloaded and not only the files that have change. Any idea to reload only what have change ? – Towrope

Answer 3

Manual browser-sync reload of specific file types in project root using current gulp syntax as of 4/2016 referenced here:

https://www.browsersync.io/docs/gulp/#gulp-manual-reload

EXAMPLE: Add lines below the SCSS reference to watch HTML and HTM files with browser-sync:

gulp.watch("./scss/*.scss", ['sass']);
gulp.watch("*.html").on("change", reload);
gulp.watch("*.htm").on("change", reload);

Effects

Answer 4

If you don't want to use a livereload or express instance, you can do something like the following which i use in my laravel 5 project with elixir gulp extension in combination with live.js.

extend elixir

elixir.extend('livereloader',function(message) { gulp.task('livereloader',function(){ return gulp.src('public/js/livereloader.js') .pipe(insert.append('')) .pipe(gulp.dest('public/js/')); }); this.registerWatcher("livereloader", 'resources/views/**/*.php'); return this.queueTask('livereloader'); });

use the task

mix.livereloader();

simple enough. even without livereload or express (don't see why i should use them at all ...)

Accouchement