Почему не обновляется страница через BrowserSync?

Question

[Анатолий Саламатин]

Всем привет! Подскажите пожалуйста, почему не срабатывает обновление страницы прис хранении pug файлов и stylus?

var gulp = require('gulp'),
browsersync = require('browser-sync'),
reload = browsersync.reload,
spritesmith = require("gulp.spritesmith"),
pugInheritance = require('gulp-pug-inheritance'),
pug = require('gulp-pug'),
changed = require('gulp-changed'),
cached = require('gulp-cached'),
gulpif = require('gulp-if'),
filter = require('gulp-filter'),
stylus = require('gulp-stylus'),
sourcemaps = require('gulp-sourcemaps'),
csscomb = require('gulp-csscomb'),
plumber = require("gulp-plumber"),
notify = require("gulp-notify"),
autoprefixer = require('gulp-autoprefixer');

// PUG
gulp.task('pug', function() {
return gulp.src('dev/pug/**/*.pug')

//only pass unchanged *main* files and *all* the partials
.pipe(changed('dist', { extension: '.html' }))

//filter out unchanged partials, but it only works when watching
.pipe(gulpif(global.isWatching, cached('pug')))

//find files that depend on the files that have changed
.pipe(pugInheritance({ basedir: 'dev/pug/', extension: '.pug', skip: 'node_modules' }))

//filter out partials (folders and files starting with "_" )
.pipe(filter(function(file) {
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
.pipe(plumber())
.pipe(pug())
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(gulp.dest('dist'));
});

gulp.task('setWatch', function() {
global.isWatching = true;
});

// STYLUS
gulp.task('stylus', function() {
return gulp.src('dev/static/stylus/*.styl')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(stylus({
'include css': true,
compress: true
}))
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(autoprefixer(['last 2 version']))
.pipe(sourcemaps.write('.'))
.pipe(csscomb())
.pipe(gulp.dest('dist/static/css/'))
.pipe(reload({
stream: true
}));
});

// СЕРВЕР
gulp.task('browsersync', function() {
browsersync.init({
server: {
baseDir: 'dist'
},
});
});

// Сборка спрайтов PNG
gulp.task('cleansprite', function() {
return del.sync('dev/static/img/sprite/sprite.png');
});

gulp.task('spritemade', function() {
var spriteData =
gulp.src('dev/static/img/sprite/*.*')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.styl',
padding: 10,
cssFormat: 'stylus',
algorithm: 'binary-tree',
cssTemplate: 'stylus.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name;
}
}));

spriteData.img.pipe(gulp.dest('dev/static/img/sprite/')); // путь, куда сохраняем картинку
spriteData.css.pipe(gulp.dest('dev/static/stylus/')); // путь, куда сохраняем стили
});
gulp.task('sprite', ['cleansprite', 'spritemade']);

// СЛЕЖКА

gulp.task('watch', ['browsersync', 'stylus'], function() {
gulp.watch('dev/static/stylus/**/*.styl', ['stylus']);
gulp.watch('dev/pug/*.pug', ['pug']);
gulp.watch('dist/*.html', browsersync.reload);
});

// Дефолтный таск
gulp.task('default', ['watch']);

Заранее спасибо

Answer 1

[Егор Живагин]

Я не проверял, просто мысль пришла)

gulp.watch('dev/pug/*.pug', ['pug', browsersync.reload]);

Либо вместо reload вешать browsersync.reload в нужных тасках можно попробовать

Comments

[Анатолий Саламатин]

Пробовал. Не поммогло

[Егор Живагин]

farcer: а примеры отсюда - https://browsersync.io/docs/gulp#gulp-sass-css - пробовал? browsersync.stream и on('change') в watch .

[Егор Живагин]

farcer: или даже отсюда - https://browsersync.io/docs/gulp#gulp-reload

[Анатолий Саламатин]

Егор Живагин: пробовал. он в консоли показыват что обновил браузер но сам браузер при этом не перезагрузился

[alvvi]

farcer: значит, проблема не в таске, а в самом browsersync. Проверьте, инжектится ли script тэг https://github.com/BrowserSync/browser-sync#requir...

Answer 2

[alvvi]

Вам следует вешать обработчик на событие 'change', пример из документации:

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);  // Обработчик
});

gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Так же, документация советует использовать пост 2.0.0 синтаксис, то есть создавать экземпляр класса

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

Больше примеров и информации можно найти здесь и здесь

Comments

[Yuriy]

не работает... хром упорно не обновляет...в console показывает, что изменил, но браузер тупо не обновляется

Answer 3

[mishashapka]

Была подобная проблема после подключения pug. Страница упорно не обновлялась, хотя в консоли все работало. Позднее выяснил, что при конвертировании Html в Pug, пропал тег body. Собственно после добавления оного тега, проблема исчезла.

Еще могу посоветовать в таске watch вместо
gulp.watch('dist/*.html', browsersync.reload);
использовать

gulp.watch('dist/*.html').on('change', browserSync.reload);

и прописать .on('change', browserSync.reload) для файлов .pug и .styl, а то получается, что он у вас только изменения в .html обновляет.