Как сделать, чтобы файлы pug/jade компилировались до перезагрузки страницы в браузере?

Question

[Cerega32]

В браузере после сохранения pug - файла отображается предпоследнее сохранение, хотя вроде командная строка показывает, что pug сделался html до перезагрузки страницы. Как сделать, чтобы все работало нормально?

var gulp = require("gulp");
var less = require("gulp-less");
var pug = require("gulp-pug");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var server = require("browser-sync");
var mqpacker = require("css-mqpacker");
var minify = require("gulp-csso");
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");
var svgstore = require("gulp-svgstore");
var svgmin = require("gulp-svgmin");
var run = require("run-sequence");


gulp.task("style", function() {
  gulp.src("less/style.less")
    .pipe(plumber())
    .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: true
      })
  ]))
    .pipe(gulp.dest("css"))
    .pipe(server.stream())
    .pipe(minify())
    .pipe(rename("style.min.css"))
    .pipe(gulp.dest("css"));
});
 
gulp.task("pug", function buildHTML() {
  return gulp.src("pug/*.pug")
      .pipe(plumber())
      .pipe(pug({pretty: true}))
      .pipe( gulp.dest(""))

});

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

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

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


gulp.task("serve", ["style"], function() {
  server.init({
    server: ".",
    notify: false,
    open: true,
    ui: false
  });

  gulp.watch("pug/**/*.pug", ["pug"]);
  gulp.watch("less/*.less", ["style"]);
  gulp.watch("less/*/*.less", ["style"]);
  gulp.watch("*.html").on("change", server.reload);
});

Comments

[Ranwise]

зачем 2 одинаковых gulp.task("images"?

[Cerega32]

Ranwise: Просто глупая ошибка. Спасибо, как-то вообще не замечал

Answer 1

[Serj-One]

Отслеживать изменения для перезагрузки лучше через сам browser-sync.

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "app"
        },
        files: ["app/js/*.js", "app/*.html", "app/*.php", "app/css/*.css"]
    });
});

Comments

[Дмитрий Христоев]

можно еще добавить reloadDelay: 3000 или около того

[Cerega32]

Спасибо за решение. А запускаться эта задача будет также по команде: "npm start"?

[Sergei Nazarenko]

Cerega32: конкретно эта задача будет запускаться по команде gulp browser-sync

[Sergei Nazarenko]

Serj-One: Чем лучше? А если надо к примеру не просто обновить страницу при изменении файла js, а сначала откомпилировать его к примеру из (ES 6 в ES2015 или проканкатенировать оптимизировать и тд) и только потом обновить браузер ?

[Serj-One]

Sergei Nazarenko: Для этого есть watch. Не вижу смысла пихать перезагрузку в отдельные таски, когда можно указать перечень перезагружаемых файлов в одном месте - конфиге browserSync.