Gulp Livereload not working with multiple .html files

general-dev

#1

gulpfile.js (2.1 KB)

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var sourceMaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var connect = require('gulp-connect');
var wait = require('gulp-wait');

var sassConfig = {
    errLogToConsole: true,
    outputStyle: 'expanded',
}

gulp.task('hello', function() {
    console.log('Hello World!');
});

gulp.task('copyfiles', function () {
    gulp.src(['./*.html', './css/*.css', './assets/***/**/*', 'js/**/*.js'], { base: './' })
        .pipe(gulp.dest('./dist'))
});

gulp.task('concat', function () {
    gulp.src('js/lib/*.js')
        .pipe(concat('plugins.js'))
        .pipe(gulp.dest('js'))
})

gulp.task('webserver', function () {
    connect.server({
        port: 3000,
        host: 'localhost',
        livereload: true
    });
});

gulp.task('sass', function() {
    return gulp
        .src('scss/main.scss')
        .pipe(sourceMaps.init())
        .pipe(sass(sassConfig).on('error', sass.logError))
        .pipe(rename('main.css'))
        .pipe(sourceMaps.write())
        .pipe(autoprefixer())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload());
});

// gulp.task('reload', function () {
//     gulp.src(['index.html', 'about.html', 'results.html', 'js/main.js', 'scss/**/*.scss', 'css/*.css'])
//         .pipe(connect.reload())
// });

gulp.task('reload', function () {
    gulp.src(['./*.html' ,'js/main.js', 'scss/**/*.scss', 'css/*.css'])
        .pipe(connect.reload())
});

gulp.task('watch', function () {
    gulp.watch('scss/**/*.scss', ['sass']);
    gulp.watch(['index.html', 'js/main.js', 'scss/**/*.scss', 'css/main.css', 'about.html', 'results.html'], ['reload']);
});

gulp.task('uglify', function() {
    return gulp
        .src(['js/main.js', 'js/plugins.js'])
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

gulp.task('default', ['webserver', 'watch', 'sass']);
// gulp.task('default', ['webserver', 'watch']);

The problem is that I have multiple .html files but gulp reloads the browser only if it's the index.html file. I have a about.html and a results.html file but the browser doesn't update the page for the about page nor the results page. But in this case the terminal shows that the task is running even if I make change to the other .html files. There's a problem with either the reload task or the webserver task probably. What should I do?


#2

I see from the gulp-livereload page that it will not automatically listen for changes. Instead, they give some info on manually calling it, or setting the start option.


#3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.