Browser-sync on gulp reloads the browser twice, but the changes are not visible?

Question

JavaScript

Hello. Here's what I use - https://github.com/Zoxon/gulp-front/blob/master/gu...
The story is this, there are jade files, there is a blocks folder where partials are stored which are used as include and extands in jade files. When you edit some jade files, the browser is updated twice, there are no changes in the browser, you have to manually update the third time for the result. Everything is ok in the console.

[15:55:27] Starting 'jade'...
[15:55:27] Finished 'jade' after 1.96 ms

However, when you edit, for example, index.jade with such content, everything is OK! After the second refresh, the changes are visible:
What could be the problem? help me please

Answer 1

I don’t know which version you are using, but in general you can fix it like this.
I had to update the browserSync config to the current version, it is different.
Then replace gulp.watch with the gulp-watch package, and use run-sequence to run the tasks, and add an incremental build for jade, since the build took a very long time.
It turned out such a gulpfile.js

'use strict';

// Инициализируем плагины
var gulp = require('gulp'),
  jade = require('gulp-jade'),
  stylus = require('gulp-stylus'),
  autoprefixer = require('autoprefixer-stylus'),
  imagemin = require('gulp-imagemin'),
  browserSync = require('browser-sync').create(),
  cssbeautify = require('gulp-cssbeautify'),
  gutil = require('gulp-util'),
  newer = require('gulp-newer'),
  include = require('gulp-include'),
  rename = require("gulp-rename"),
  uglify = require('gulp-uglify'),
  imageminPngquant = require('imagemin-pngquant'),
  csscomb = require('gulp-csscomb'),
  csso = require('gulp-csso'),
  gulpFilter = require('gulp-filter'),
  plumber = require('gulp-plumber'),
  del = require('del'),
  runSequence = require('run-sequence'),
  watch = require('gulp-watch'),
  gulpZip = require('gulp-zip'),
  nodePath = require('path'),
  jadeInheritance = require('gulp-jade-inheritance'),
  gulpif = require('gulp-if'),
  cached = require('gulp-cached'),
  changed = require('gulp-changed'),
  filter = require('gulp-filter');

// Функция обработки ошибок
var errorHandler = function(err) {
  gutil.log([(err.name + ' in ' + err.plugin).bold.red, '', err.message, ''].join('\n'));

  if (gutil.env.beep) {
    gutil.beep();
  }

  this.emit('end');
};

var correctNumber = function correctNumber(number) {
  return number < 10 ? '0' + number : number;
};

// Return timestamp
var getDateTime = function getDateTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = correctNumber(now.getMonth() + 1);
  var day = correctNumber(now.getDate());
  var hours = correctNumber(now.getHours());
  var minutes = correctNumber(now.getMinutes());
  return year + '-' + month + '-' + day + '-' + hours + minutes;
};

// Имена папок
var config = {
  path: {
    source: 'source',
    dist: 'public',
    assets: 'assets',
    partials: 'blocks',
    js: 'js',
    css: 'css',
    images: 'img'
  }
};

// Настройки плагинов
var plugins = {
  browserSync: {
    options: {
      server: {
        baseDir: './public'
      }
    }
  },

  autoprefixer: {
    options: {
      browsers: [
          'last 2 version',
          'Chrome >= 20',
          'Firefox >= 20',
          'Opera >= 12',
          'Android 2.3',
          'Android >= 4',
          'iOS >= 6',
          'Safari >= 6',
          'Explorer >= 8'
        ],
      cascade: false
    }
  },

  stylus: {
    options: {}
  },

  cssbeautify: {
    options: {
      indent: '	',
      autosemicolon: true
    }
  },

  jade: {
    options: {
      pretty: '\t',
      basedir: config.path.source
    }
  },

  jadeInheritance: {
    options: {basedir: config.path.source}
  },

  imagemin: {
    options: {
      optimizationLevel: 3,
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [imageminPngquant()]
    }
  },

  rename: {
    options: {
      suffix: ".min"
    }
  }
}

// Пути к файлам
var path = {
  source: {
    html: [
      config.path.source + '/**/*.jade',
      '!' + config.path.source + '/' + config.path.partials + '/**/*.jade'
    ],
    css: [
      config.path.source + '/**/*.styl',
      '!' + config.path.source + '/**/_*.styl',
      '!' + config.path.source + '/' + config.path.css + '/lib/**/*.styl'
    ],
    img: config.path.source + '/' + config.path.images + '/**/*.{jpg,jpeg,png,gif,svg}',
    js: config.path.source + '/' + config.path.js + '/*.js',
    copy: config.path.assets + '/**/*'
  },

  dest: {
    html: config.path.dist,
    css: config.path.dist,
    img: config.path.dist + '/' + config.path.images,
    js: config.path.dist + '/' + config.path.js,
    copy: config.path.dist
  },

  watch: {
    html: config.path.source + '/**/*.jade',
    css: config.path.source + '/**/*.styl',
    img: config.path.source + '/' + config.path.images + '/**/*.{jpg,jpeg,png,gif,svg}',
    js: config.path.source + '/**/*.js',
    copy: config.path.assets + '/**/*'
  }
};

// Локальный сервер
gulp.task('browser-sync', function() {
  return browserSync.init(plugins.browserSync.options);
});

gulp.task('bs-reload', function (cb) {
  browserSync.reload();
});

// Собираем Stylus
gulp.task('stylus', function() {
  return gulp.src(path.source.css)
    .pipe(plumber({
      errorHandler: errorHandler
    }))
    .pipe(stylus({
      use: [
        autoprefixer(plugins.autoprefixer.options)
      ]
    }))
    .pipe(cssbeautify(plugins.cssbeautify.options))
    .pipe(csscomb())
    .pipe(gulp.dest(path.dest.css))
    .pipe(browserSync.stream())
    .pipe(csso())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(path.dest.css));
});

// Собираем html из Jade
gulp.task('jade', function() {
  return gulp.src('source/**/*.jade')
    .pipe(plumber({
      errorHandler: errorHandler
    }))
    .pipe(cached('jade'))
    .pipe(gulpif(global.isWatching, jadeInheritance({basedir: 'source'})))
    .pipe(filter(function (file) {
      return !/source[\\\/]blocks/.test(file.path);
    }))
    .pipe(jade(plugins.jade.options))
    .pipe(gulp.dest(path.dest.html));
});

// Копируем и минимизируем изображения
gulp.task('images', function() {
  return gulp.src(path.source.img)
    .pipe(plumber({
      errorHandler: errorHandler
    }))
    .pipe(newer(path.dest.img))
    .pipe(imagemin(plugins.imagemin.options))
    .pipe(gulp.dest(path.dest.img));
});

// Копируем файлы
gulp.task('copy', function() {
  return gulp.src(path.source.copy)
    .pipe(plumber({
      errorHandler: errorHandler
    }))
    .pipe(newer(path.dest.copy))
    .pipe(gulp.dest(path.dest.copy))
    .pipe(gulpFilter(['**/*.js', '!**/*.min.js']))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(path.dest.css));
});

// Собираем JS
gulp.task('plugins', function() {
  return gulp.src(path.source.js)
    .pipe(plumber({
      errorHandler: errorHandler
    }))
    .pipe(include())
    .pipe(gulp.dest(path.dest.js))
    .pipe(uglify().on('error', gutil.log))
    .pipe(rename(plugins.rename.options))
    .pipe(gulp.dest(path.dest.js));
});

// Отчистка папки public
gulp.task('cleanup', function(cb) {
  return del(config.path.dist + '/*', cb);
});

gulp.task('build-zip', function() {
  var prjName = 'dist';
  var rootFolderName = nodePath.basename(__dirname);

  if (!rootFolderName || typeof rootFolderName === 'string') {
    prjName = rootFolderName;
  }

  var datetime = '-' + getDateTime();
  var zipName = prjName + datetime + '.zip';

  return gulp.src('public/**/*')
    .pipe(gulpZip(zipName))
    .pipe(gulp.dest('zip'));
});

gulp.task('build', function (cb) {
  return runSequence(
    [
      'stylus',
      'jade',
      'images',
      'plugins',
      'copy'
    ],
    cb
  );
});

gulp.task('zip', function (cb) {
  return runSequence(
    'cleanup',
    'build',
    'build-zip',
    cb
  );
});

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

  watch(path.watch.css, function() {
    return runSequence('stylus');
  });

  watch('source/**/*.jade', function() {
    return runSequence('jade', browserSync.reload);
  });

  watch(path.watch.img, function() {
    return runSequence('images', browserSync.reload);
  });

  watch(path.watch.js, function() {
    return runSequence('plugins', browserSync.reload);
  });

  watch(path.watch.copy, function() {
    return runSequence('copy', browserSync.reload);
  });

});

gulp.task('default', function (cb) {
  return runSequence(
    'build',
    'browser-sync',
    'watch',
    cb
  );
});

package.json

{
  "name": "gulp-front",
  "version": "3.0.0",
  "homepage": "https://github.com/Zoxon/gulp-front",
  "license": "MIT",
  "description": "Простой путь разработки с Jade и Stylus",
  "repository": {
    "type": "git",
    "url": "http://github.com/Zoxon/gulp-front.git"
  },
  "author": "Velicko Konstantin <[email protected]> (http://github.com/Zoxon)",
  "licenses": {
    "type": "MIT",
    "url": "http://github.com/Zoxon/gulp-front/blob/master/license.txt"
  },
  "bugs": {
    "url": "http://github.com/Zoxon/gulp-front/issues"
  },
  "dependencies": {
    "autoprefixer-stylus": "^0.9.1",
    "browser-sync": "^2.10.0",
    "del": "^2.1.0",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-changed": "^1.3.0",
    "gulp-cssbeautify": "^0.1.3",
    "gulp-csscomb": "^3.0.6",
    "gulp-csso": "^1.0.1",
    "gulp-filter": "^3.0.1",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-include": "^2.0.2",
    "gulp-jade": "^1.1.0",
    "gulp-jade-inheritance": "^0.5.4",
    "gulp-newer": "^1.1.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-stylus": "^2.0.7",
    "gulp-uglify": "^1.5.1",
    "gulp-util": "^3.0.6",
    "gulp-watch": "^4.3.5",
    "gulp-zip": "^3.2.0",
    "imagemin-pngquant": "^4.2.0",
    "run-sequence": "^1.1.5"
  }
}

If you have an old folder structure (assets, public, source folder at the root), then just try to replace these files

Answer 2

In the jade task, remove .pipe(reload({stream:true}));
Add the run-sequence
plugin and change the watcher for jade to something like this:

gulp.watch(path.watch.html, function(){runSequence('jade', reload)});

Answer 3

this starts to show up when the number of .jade layouts becomes large. On several - it updates immediately, no problem, if there are a lot - it stupidly refreshes the page several times, but there are no changes, we manually press F5 and all the changes appear. Haven't found a solution yet. Perhaps you need to install a plugin that updates only changed files. Hands have not yet reached.

Answer 4

You can add the `reloadDebounce: 2000` option to browserSync. But then there will be a delay of 2 seconds before rebooting. It is also possible that if you increase the number of pages, this delay will not be enough.