CODEWITHSUNDEEP
gulpbrowser-sync
Bertrand Engogram
Bertrand Engogram

Reputation: 629

browsersync only reloads 'root' index.html

I am working on a website build tool (https://github.com/bmargogne/website-builder.git). BrowserSync works perfectly while being on the root index.html, but it does not reload anywhere else...

Here is the (simplified) way of how I did... Let's say I have :

src/index.html
src/_header.html
src/page/index2.Html

One task builds HTML pages by including html partials (their names start with '_') 

gulp.task('pagesHtml', () => {
    const SRC = 'src/**/*.html';
    const EXCLUDE = '!src/**/_*.html';
    return gulp.src( [SRC, EXCLUDE], { ignoreInitial: false } )
        pipe(   fileinclude({ prefix: '@@', basepath: co.src }))
        .pipe(  gulp.dest( 'www/' ));
});

One task start browser Sync server

gulp.task('serveLocal', () => {
    return browserSync.init({
        server:{ baseDir : 'www' },
        port: 3000,         
        open: true
    }); 
});

One task is called to reload browserSync (separated, as it is called by other 'watchers tasks' from my project)

gulp.task('liveReload', ()) => {
    browserSync.reload();
});

And one task watch all HTML (including partials) and should rebuild the whole page, then reload. 

gulp.task('watch-pagesHtml', () => {
    const SRC = 'src/**/*.html';        
    return watch( SRC, () => {
        runSequence('pagesHtml', 'liveReload');
    });
    return;
});

I start these tasks by starting runSequence like this :

gulp.task('default', () => {
    runSequence('pagesHtml', 'watch-pagesHtml');
});

When I work on index or _header : No problems at all! The changes are applied, built, and the browse reloads.

However, when I work on pages/index2, the changes are applied and built, but the browser does not reload. (though a F5 works and shows the change applied )

What did I do wrong ?

Upvotes: 0

Views: 1257

Answers (2)

Zac
Zac

Reputation: 121

A bit late but if someone still looking for an answer, you can do something like that:

var browserSync = require("browser-sync");

browserSync({
    proxy: "wordpress.dev",
    snippetOptions: {
        ignorePaths: "wp-admin/**"
    }
});

Upvotes: 0

Jonatan Santa Cruz
Jonatan Santa Cruz

Reputation: 63

Browsersync works by injecting an asynchronous script tag in the body, start your project and inspect the body tag. (With browser developer tool).

If you can't fine something like: <script async>...</script> (and browsersync stuffs), there is the problem.

I read your code, and I notice that you write the <body> (open tag) in header file, and </body> (close tag)in other footer file, and it is confusing but I did not find the body tag in the other html files when I think that was necessary.

The browser "try" to fix errors in the html, auto completing tags from the original html file for example.

I have two possible answers to your problem.

1) The browser autocomplete the tag in the header file, an also autocomplete the tag in the footer file, so browsersync have problems to inject de asynchronous script tag that is necessary to reload the page because there are two bodies. (if this is possible)

2) The browser do not find the body tag in the html, so the browser create it after, but browsersync inject the script in your html file, not in the browser.

Make sure that the body tag is generated by your own code and not by the browser.

I hope that helps.

Upvotes: 3

Related Questions