BrowserSync + gulp only reloads the page once, what's the problem?

D

Dmitry2016-01-11 19:59:01

gulp.js

Dmitry, 2016-01-11 19:59:01

There is such a piece of code in the gulpfile.js file

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']);

});

It should reload the page after the jade-watch task is executed, which in turn waits for the jade task to execute, but it fires only once, in the next compilation attempts, only the jade task is executed. Here is the console log

[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

What is the problem here, I can not understand for 2 hours already?
PS: Full abbreviated version without other tasks and requests

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']);

  });

A working solution, not exactly exquisite maybe, accepted by me:

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

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Danila, 2016-01-11
@Machinez

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

try to separate compilation of jade and reload, maybe jade just doesn't have time to compile html on output

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']);
});

if this is the problem, then tracking html to reload rather than jade should help
if not, then you will have to provide the full code, because the problem may be in the file paths

@

@defunked, 2016-08-08
_

Perhaps this is the problem?

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

but this will:

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