BrowserSync + gulp делает релоад страницы только один раз, в чем проблема?

Question

[Dmitry]

Есть такой кусок кода в файле gulpfile.js

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

  return gulp.src('app/jade/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('app'));

});

gulp.task('jade-watch', ['jade'], browserSync.reload);

gulp.task('default', ['jade'], function() {

  browserSync.init({
    notify: false,
    server: {
      baseDir: ['.tmp','app']
    }
  });

  gulp.watch(path.jade, ['jade-watch']);

});

Он должен перезагружать страницу после того, как выполниться таск jade-watch, который в свою очередь ждет выполнения таска jade, но он срабатывает только один раз, в следующих попытках компиляции, выполняется только таск jade. Вот лог консоли

[BS] Serving files from: .tmp
[BS] Serving files from: app
[19:49:22] Starting 'jade'...
[19:49:23] Finished 'jade' after 492 ms
[19:49:23] Starting 'jade-watch'...
[BS] Reloading Browsers...
[19:49:29] Starting 'jade'...
[19:49:29] Finished 'jade' after 421 ms
[19:49:46] Starting 'jade'...
[19:49:46] Finished 'jade' after 382 ms

В чем тут проблема, не могу понять уже часа 2?

PS: Полная сокращенная без остальных задач и реквестов версия

var browserSync = require('browser-sync').create()
var jade = require('gulp-jade');

var path = {
  jade: 'app/jade/**/*.jade',
};

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

    return gulp.src('app/jade/*.jade')
      .pipe(jade({
        pretty: true
      }))
      .pipe(gulp.dest('app'));

  });

  gulp.task('jade-watch', ['jade'], browserSync.reload);

  gulp.task('default', ['jade'], function() {

    browserSync.init({
      notify: false,
      server: {
        baseDir: ['.tmp','app']
      }
    });

    gulp.watch(path.jade, ['jade-watch']);

  });

Рабочее решение, не совсем изысканное может, принятое мной:

gulp.task('jade-watch', ['jade'], function(){
    browserSync.reload();
  });

Comments

[frontendthug]

Какая операционная система? У меня на windows 7 работает.

[Dmitry]

frontendthug: windows 10, gulp 3.9, node 4.1.2 и хоть убей не работает.

Answer 1

[Danila]

gulp.task('jade-watch', ['jade'], browserSync.reload);

попробуйте разделить компиляцию jade и релоад, возможно просто jade не успевает скомпилировать html на выходе

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

  return gulp.src('app/jade/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('app'));

});

gulp.task('watch', function() {
    	gulp.watch(path.html).on('change', browserSync.reload);
    	gulp.watch(path.jade, ['jade']);
});

если проблема в этом, то слежка за html для перезагрузки нежели за jade должна помочь
если же нет, то вам придется привести полный код, т.к проблема может быть в путях файлов

Comments

[Dmitry]

вся фишка кода, что я привел, в том что пока не выполнится компиляция следующий таск не будет исполнен, но происходит что-то непонятное, выполняется только один таск в повторе, игнорируя первый. А по поводу слежения за html изменениями это не выход, он не успевает схатить полное их обновление и подгружает старую версию html. Почему я и начал пререписывать код, приходилось вручную обновлять после gulp.watch(path.html).on('change', browserSync.reload);

[Danila]

если посмотреть на приведенный вами вывод консоли, то видно что проблема в том, что таск 'jade-watch' начинается, и не заканчивается, от чего и не работает reload
не знаю что там вам приходилось вручную обновлять, вот рабочий код с html

var gulp =require('gulp');
var browserSync = require('browser-sync').create();
var jade = require('gulp-jade');

var path = {
  jade: 'app/jade/**/*.jade',
  html: 'app/*.html'
};

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

    return gulp.src('app/jade/*.jade')
      .pipe(jade({
        pretty: true
      }))
      .pipe(gulp.dest('app'));

  });

gulp.task('watch', function() {
    	gulp.watch(path.html).on('change', browserSync.reload);
    	gulp.watch(path.jade, ['jade']);
});

  gulp.task('default', ['watch'], function() {

    browserSync.init({
      notify: false,
      server: {
        baseDir: ['.tmp','app']
      }
    });


  });

[Dmitry]

Данила: Я серьезно, у меня был сразу написан такой же код, и с ним приходилось два раза сохранять файл, чтобы подгрузился новый скомпиленый html. причем появлялась вот такая борода

[13:08:54] Starting 'jade'...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[13:08:56] Finished 'jade' after 1.53 s
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...

Answer 2

[defunked]

Возможно проблема в этом?

stackoverflow.com

I figured it out: browser-sync doesn't like implicit html tags, so this (although valid HTML5) will not work:

<!doctype html>
<title>implicit</title>

but this will:

<!doctype html>
<html>
    <head>  
        <title>full doc</title>
    </head>
    <body></body>
</html>