LiveReloader with browser-sync. What to do if there are no updates on the page?

Question

WordPress

Good evening! I am using browser-sync + jade in a project. When you save changes in the example.jade file, the browser window is refreshed, but the changes that were made do not appear, although they are in the example.html file. If you once again save the markup in the editor (simply save without changes) or manually reload the browser window, the changes work. Tried using gulp-connect, same story((((((
Here is the task.

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'),
    concat = require('gulp-concat'),
    gFilter = require('gulp-filter'),
    jade = require('gulp-jade'),
    mainBowerFiles = require('main-bower-files'),
    plumber = require('gulp-plumber'),
    // reload = browserSync.reload,
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

//Static Server + watching html/scss/js files
gulp.task('serve', function() {
  browserSync.init(['*.html', 'jade/*.jade'], {
    server: {
      baseDir: './',
      directory: true
    },
    ghostMode: {
      clicks: true,
      forms: true,
      scroll: false
    },
    open: false
    // tunnel: true
  });
});

// Concat bower_components
gulp.task('concatBowerFiles', function() {
  gulp.src([
      'bower_components/jquery/dist/jquery.min.js',
      'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js',
      'bower_components/fotorama/fotorama.js',
      'bower_components/jquery.maskedinput/src/jquery.maskedinput.js',
      'bower_components/masonry/dist/masonry.pkgd.min.js',
      'bower_components/owl.carousel/dist/owl.carousel.min.js'
    ])
    // .pipe(sourcemaps.init())
    .pipe(concat('components.min.js'))
    .pipe(uglify())
    // .pipe(sourcemaps.write())
    .pipe(gulp.dest('Content/NewDesign/javascripts/components'));
});

// Copypast bower_components for development
gulp.task('copypastBowerFiles', function() {
  var jsFilter = gFilter('**/*.js');
  var cssFilter = gFilter('**/*.css');
  var fontFilter = gFilter(['*.eot', '*.woff', '*.svg', '*.ttf']);
  var imgFilter = gFilter(['*.jpg', '*.png', '*.gif']);
  gulp.src(mainBowerFiles())
    .pipe(jsFilter)
    .pipe(gulp.dest('Content/NewDesign/javascripts/components'))
    .pipe(jsFilter.restore())
    .pipe(fontFilter)
    .pipe(gulp.dest('Content/NewDesign/fonts'))
    .pipe(fontFilter.restore())
    .pipe(imgFilter)
    .pipe(gulp.dest('Content/NewDesign/images'))
    .pipe(imgFilter.restore());
    // .pipe(cssFilter)
    // .pipe(gulp.dest('Content/NewDesign/stylesheets/components'));
});

// Start bower
gulp.task('bower', ['concatBowerFiles', 'copypastBowerFiles']);

// JS concat
gulp.task('js', function() {
  gulp.src([
    // 'Content/NewDesign/javascripts/components/components.min.js',
    'Content/NewDesign/javascripts/scripts.js'
  ])
  .pipe(concat('all.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('Content/NewDesign/javascripts'))
  .pipe(browserSync.reload({stream: true}));
});

// Libsass task
gulp.task('sass', function() {
  gulp.src('sass/styles.scss')
    .pipe(plumber())
    // .pipe(sourcemaps.init())
    .pipe(sass())
    // .pipe(autoprefixer('last 10 versions', 'ie 8', 'ie 9', 'ios 6', 'android 4'))
    // .pipe(sourcemaps.write())
    .pipe(gulp.dest('Content/NewDesign/stylesheets'))
    .pipe(browserSync.reload({stream: true}));
});

// Jade task
gulp.task('jade', function() {
  gulp.src('jade/*.jade')
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./'));
});

// Watch task
gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['sass']);
  gulp.watch('jade/**/*.jade', ['jade']);
  // gulp.watch('*.html').on('change', browserSync.reload({stream:true}));
});

// Default task
gulp.task('default', ['serve', 'jade', 'sass', 'watch']);

PS: I have windows8
PPS:
In general, the problem is that when you change the *.jade file, all files change:
[17:52:08] Starting 'jade'...
[17:52:08] Finished 'jade' after 4.31 ms
[BS] File changed: c:\Sites\gulp_projects\example\jade\example.jade
[BS] 5 files changed (example.html, example-2.html, example-3.html, example-4. html, example-5.html)
My 'jade' task doesn't complete before the 'browsersync' task. I manually tried to update after a few seconds, everything works.
Tried to do this: browserSync.init(./*.html' { ..., gives this crap:
c:\Sites\gulp_projects\example\node_modules\browser-sync\lib\browser-sync.js:616
bs .io.sockets.emit("browser:reload");
^
TypeError: Cannot read property 'sockets' of undefined
at null._onTimeout (c:\Sites\gulp_projects\example\node_modules\browser-sync\lib\browser-sync.js:616:18)
at Timer.listOnTimeout (timers.js :110:15)
Any ideas?

Answer 1

Also encountered. It helped like this:

gulp.task('pages:dev', function() {
  gulp.src(config.src)
    .pipe(plumber({
      errorHandler: errorHandler
    }))
    .pipe(jade(config.settings))
    .pipe(gulp.dest(config.dest))
    .on('end', browserSync.reload);
});

Answer 2

I had the same problem. I set caching as here github.com/gulp-jade-inheritance , caching worked, only the file in which I made changes was overwritten, but I still had to reload 2 times, but then I added a delay to the 'serve' task - reloadDelay: 300, and everything is gone.

Answer 3

By the way, I forgot to say that these problems arise with jade. When you edit html or scss everything is fine, everything works fine.