Почему HTML не обновляется Browser-Sync в gulp?

Question

[Дмитрий]

При изменении html файла gulp автоматически не обновляет страницу. При изменении less файлов css обновляется замечательно.

var gulp = require("gulp"),
less = require("gulp-less"),
server = require("browser-sync"),
cssnano = require("gulp-cssnano"),
concat = require("gulp-concat"),
uglify = require("gulp-uglifyjs"),
rename = require("gulp-rename"),
autoprefixer = require("autoprefixer"),
plumber = require("gulp-plumber"),
gutil = require("gulp-util"),
minify = require("gulp-csso"),
postcss = require("gulp-postcss"),
svgstore = require("gulp-svgstore"),
svgmin = require("gulp-svgmin"),
mqpacker = require("css-mqpacker"),
imagemin = require("gulp-imagemin"),
run = require ("run-sequence"),
del = require ("del");


gulp.task("less", function() {
	gulp.src("src/less/style.less")
	.pipe(plumber(function (error) {
		gutil.log(error.message);
		this.emit('end');
	}))
	.pipe(less())
	.pipe(postcss([
		autoprefixer({browsers: [
			"last 1 version",
			"last 2 Chrome versions",
			"last 2 Firefox versions",
			"last 2 Opera versions",
			"last 2 Edge versions"
		]}),
		mqpacker({
			sort: false
		})
	]))
	.pipe(gulp.dest("build/css"))
	.pipe(cssnano())
	.pipe(rename({suffix: ".min"}))
	.pipe(gulp.dest("build/css"))
	.pipe(server.reload({stream: true}))
});

gulp.task("images", function() {
	return gulp.src("build/src/img/**/*.{png,jpg,gif}")
	.pipe(imagemin([
		imagemin.optipng({optimizationLevel: 3}),
		imagemin.jpegtran({progressive: true})
	]))
	.pipe(gulp.dest("build/img"));
});

gulp.task("symbols", function() {
	return gulp.src("build/src/img/icons/*.svg")
	.pipe(svgmin())
	.pipe(svgstore({
		inlineSvg: true
	})) 
	.pipe(rename("symbols.svg"))
	.pipe(gulp.dest("build/img"));
});

gulp.task("copy", function() {
	return gulp.src([
		"fonts/**/*.{woff,woff2}",
		"src/img/**/*",
		"js/**",
		"*.html",
	], {
		base: "."
	})
	.pipe(gulp.dest("build"));
});

gulp.task("clean", function() {
	return del("build");
});

gulp.task("serve", function() {
	server({
		server: {
			baseDir: "build" 
		},
		notify: false
	});
});

gulp.task("watch", ["serve"], function() {
	gulp.watch("src/less/**/*.less", ["less"]);
	gulp.watch("*.html", server.reload);
	gulp.watch("js/**/*.js", server.reload);
});

gulp.task("build", function(fn) {
	run(
		"clean",
		"copy",
		"less",
		"images",
		"symbols",
		"watch",
		fn
	);
});

gulp.task("default", ["build"], function() {});

Comments

[Дмитрий]

Нашел решение в англоязычном гите. Вот ссылка если кому интересно: https://github.com/BrowserSync/browser-sync/issues/549

И мой gulpfile.js с решенной проблемой:

var gulp = require("gulp"),
    less = require("gulp-less"),
    server = require("browser-sync"),
    cssnano = require("gulp-cssnano"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglifyjs"),
    rename = require("gulp-rename"),
    autoprefixer = require("autoprefixer"),
    plumber = require("gulp-plumber"),
    gutil = require("gulp-util"),
	minify = require("gulp-csso"),
	postcss = require("gulp-postcss"),
	svgstore = require("gulp-svgstore"),
	svgmin = require("gulp-svgmin"),
	mqpacker = require("css-mqpacker"),
	swig = require("gulp-swig"),
	imagemin = require("gulp-imagemin"),
	run = require ("run-sequence"),
	del = require ("del");
	
	
gulp.task("serve", ["less"], function() {
  server({
    server: {
		baseDir: "build"  
	},
	notify: false
  });
   gulp.watch("src/less/**/*.less", ['less']);
   gulp.watch("*.html", ['templates']);
});

gulp.task("templates", function() {
  return gulp.src("*.html")
    .pipe(swig({
      defaults: {
        cache: false
      }
    }))
    .pipe(gulp.dest("build"))
    .pipe(server.reload({stream: true}))
});
	
gulp.task("less", function() {
    gulp.src("src/less/style.less")
	.pipe(plumber(function (error) {
	 gutil.log(error.message);
	 this.emit('end');
}))
   .pipe(less())
   .pipe(postcss([
  autoprefixer({browsers: [
  "last 1 version",
  "last 2 Chrome versions",
  "last 2 Firefox versions",
  "last 2 Opera versions",
  "last 2 Edge versions"
]}),
  mqpacker({
  sort: false
  })
  ]))
  .pipe(gulp.dest("build/css"))
  .pipe(cssnano())
  .pipe(rename({suffix: ".min"}))
  .pipe(gulp.dest("build/css"))
  .pipe(server.reload({stream: true}));
});

gulp.task("images", function() {
	return gulp.src("build/src/img/**/*.{png,jpg,gif}")
	.pipe(imagemin([
	imagemin.optipng({optimizationLevel: 3}),
	imagemin.jpegtran({progressive: true})
	]))
	.pipe(gulp.dest("build/img"));
});

gulp.task("symbols", function() {
	return gulp.src("build/src/img/icons/*.svg")
		.pipe(svgmin())
		.pipe(svgstore({
			inlineSvg: true
		})) 
		.pipe(rename("symbols.svg"))
		.pipe(gulp.dest("build/img"));
});

gulp.task("copy", function() {
	return gulp.src([
		"fonts/**/*.{woff,woff2}",
		"src/img/**/*",
		"js/**",
		"*.html",
	], {
		base: "."
		})
		.pipe(gulp.dest("build"));
});

gulp.task("clean", function() {
	return del("build");
});


gulp.task("watch", ["serve", "templates"], function() {
	gulp.watch("src/less/**/*.less", ["less"], server.reload);
	gulp.watch("*.html").on("change", server.reload);
	gulp.watch("js/**/*.js", server.reload);
});

gulp.task("build", function(fn) {
	run(
	"clean",
	"copy",
	"less",
	"images",
	"symbols",
	"watch",
	fn
	);
});

gulp.task("default", ["build"], function() {});

[Лена Рихнавская]

Спасибо, добрый человек. У меня с Pug-ом тоже сработало.

Answer 1

[Vlad Feninets]

попробуй поменять server.reload на server.stream()

Comments

[Дмитрий]

Попробовал ничего не изменилось.
Попробовал так же такую комбинацию: gulp.watch("*.html").on("change", server.reload); - так же не дала результата.