LiveReloader с помощью browser-sync. Что делать, если не появляются обновления на странице?

Question

[Gasherez]

Добрый вечер! Использую browser-sync + jade в проекте. Когда сохраняешь изменения в файле example.jade, происходит обновление окна браузера, но изменения которые были внесены не появляются, хотя в файле example.html они есть. Если еще раз сохранишь разметку в редакторе(просто сохранение без изменений) или вручную перезагрузишь окно браузера изменения срабатывают. Пробовал использовать gulp-connect, такая же история((((((
Вот таск.

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: У меня windows8

PPS:
В общем проблема в том, что при изменении фала *.jade, изменяются все файлы:
[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)
Мой таск 'jade' не успевает завершиться до таска 'browsersync'. Я вручную пробовал обновлять через несколько сек, все срабатывает.
Пытался сделать вот так: browserSync.init(./*.html' { ..., выдает вот такую хрень:
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)
Есть идеи?

Comments

[Дмитрий]

Может, есть смысл перезагружать браузер только при изменениях уже в готовых файлах (html, css)?

Answer 1

[Roman Fov]

Тоже сталкивался. Помогло вот так:

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

Comments

[Gasherez]

Спасибо, я тоже уже решил эту проблему, посредством gulp-changed и gulp-jade-inheritance. Это происходило, потому что обновлялись все файлы jade, а если их много то они не успевали обновиться, а перезагрузка срабатывала моментально

[lavezzi1]

Gasherez: как конкретно вы решили эту проблему? У меня тоже самое

[Gasherez]

var jadeInheritance = require('gulp-jade-inheritance');
var gFilter = require('gulp-filter');
var cached = require('gulp-cached');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');

// Jade task (https://github.com/juanfran/gulp-jade-inheritance)
gulp.task('jade', function() {
gulp.src('jade/**/*.jade')
.pipe(plumber())
.pipe(cached('jade'))
.pipe(changed('dist', {extension: '.html'}))
.pipe(jadeInheritance({basedir: 'jade'}))
.pipe(gFilter(function (file) {
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('./'))
.pipe(browserSync.reload({stream: true}));
});

Вот как то так! Удачи!

Answer 2

[Николай Антонов]

У меня такая же проблема была. Установил кеширование как тут github.com/gulp-jade-inheritance, кеширование работало, перезаписывался только тот файл, в котором вносил изменения, но всеравно надо было перезагружать 2 раза, но потом добавил в таск 'serve' задержку - reloadDelay: 300, и все прошло.

Answer 3

[Gasherez]

Кстати я забыл сказать, что эти проблемы возникают именно с jade. Когда редактируешь html или scss все нормально, все исправно работает.