Browser-sync: Browsersync issue reload multipage html

Created on 10 Jul 2015 · 6Comments · Source: BrowserSync/browser-sync

I'm use jade and Browsersync in gulp to the generate html web page.
When i run gulp Brwosersync can't reload html file in the other directory(view.html). And i have to manualy reload browser. But for index.html in root folder work fine. how i can fix this issue?!

Folder structure:

app
- index.html
- page
- view.html

// jade task
gulp.task('jade', function(){
    return gulp.src(path.template+ '/**/*.jade')
        .pipe($.plumber({errorHandler: onError}))
        .pipe($.jade({
            pretty: true
        }))
        .pipe(gulp.dest(path.app))
        .pipe(reload({stream: true}));
});

// reload
gulp.task('bs-reload', function () {
    browserSync.reload();
});

// browser-sync
gulp.task("browser-sync", function () {
    browserSync.use(htmlInjector, {
        files: "app/**/*.html"
    });
    browserSync.init({
        injectChanges: true,
        notify: false,
        server: "app"
    });
});

gulp.task('default',['browser-sync'], function(){
    watch("src/template/**/*", function() { gulp.start('jade'); });
    watch("app/**/*.html", function() { gulp.start('bs-reload'); });
});

Source

sajadabedi

👍1

Most helpful comment

+1.

Same issue here, the browsersync is not added to pages under subfolder, only on index.html

vhlongon on 10 Feb 2016

👍2

All 6 comments

nothing?

sajadabedi on 13 Jul 2015

hi @sajadabedi - please provide a simple repo showing this problem and we'll happily help.

it can be very simple, such as this recipe

shakyShane on 13 Jul 2015

Thanks @shakyShane for reply.
i clone this repo, and your repo has same issue :)
Don't reload browser when url somthing like this : http://localhost:3000/about.html
Or this : http://localhost:3000/page/about.html.

And only reload index.html (localhost:3000).

My repo: Start-Gulp

sajadabedi on 17 Jul 2015

👍1

+1.

Same issue here, the browsersync is not added to pages under subfolder, only on index.html

vhlongon on 10 Feb 2016

👍2

@sajadabedi I noticed that commenting around the tag on my html pages was causing the issue.

So something like this:

<!--[if IE 9]><body class="ie9"><![endif]-->
    <!--[if IE 8]><body class="ie8"><![endif]-->
    <!--[if IE 7]><body class="ie7"><![endif]-->
    <!--[if !IE]>--><body><!--<![endif]-->

doesnt work. I hope that helps!

vhlongon on 10 Feb 2016

Same issue here.

I had this block on the head of the html

<!-- Fixes -->
<!--[if lt IE 9]>
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script type="text/javascript" src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

so I followed the @sajadabedi suggestion and deleted it, then it works!

BUT, the weird thing happened after I put the same code back; it works again...

So basically the file is the same, but now it works (I'm sure about it because I executed git status and that file didn't change)