search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.14k stars 754 forks source link

Browsersync issue reload multipage html #722

Open sajadabedi opened 8 years ago

sajadabedi commented 8 years ago

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:

// 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'); });
});
sajadabedi commented 8 years ago

nothing?

shakyShane commented 8 years ago

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

it can be very simple, such as this recipe

sajadabedi commented 8 years ago

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

vhlongon commented 8 years ago

+1.

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

vhlongon commented 8 years ago

@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!

diegoteliz commented 8 years ago

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)