Why is gulp-connect reloading with a delay of 1 change?

Question

css

I don’t know how the problem started, but not long ago livereload started behaving strangely, namely, doing reload only after 1 change in the file. It always updates the page, but changes to pages appear only after 2 changes in a row. Those. I add text to the page. I look at the page, nothing appears. I add "1" to "Text" and just "Text" appears on the page. Yesterday everything was fine, and now such garbage.
Here is the gulpfile

var gulp = require('gulp'),
  jade = require('gulp-jade'),
  stylus = require('gulp-stylus'),
  csso = require('gulp-csso'),
  myth = require('gulp-myth'),
  imagemin = require('gulp-imagemin'),
  uglify = require('gulp-uglify'),
  concat = require('gulp-concat'),
    csscomb = require('gulp-csscomb'),
  connect = require('gulp-connect');
var autoprefixer = require('gulp-autoprefixer');	
var outputDir = 'public';
var assetDir = 'assets';

  // Собираем Stylus
// Собираем Stylus
gulp.task('stylus', function() {
    gulp.src('./assets/stylus/*.styl')
        .pipe(stylus()) // собираем stylus
    .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(autoprefixer())
    //.pipe(myth()) // добавляем префиксы - http://www.myth.io/
    .pipe(gulp.dest(outputDir+'/css/')) // записываем css
    .pipe(connect.reload()); // даем команду на перезагрузку css
});
// Собираем css
gulp.task('csstouse', function() {
    gulp.src('./assets/stylus/*.css')
    .pipe(autoprefixer())
    .pipe(gulp.dest(outputDir+'/css/')) // записываем css
    .pipe(connect.reload()); // даем команду на перезагрузку css
});

// Собираем html из Jade

gulp.task('jade', function() {
    gulp.src([assetDir+'/template/*.jade', '!'+assetDir+'/template/_*.jade'])
        .pipe(jade({
            pretty: true
        }))  // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
        .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(gulp.dest(outputDir)) // Записываем собранные файлы
    .pipe(connect.reload()); // даем команду на перезагрузку страницы
}); 

// Собираем JS
gulp.task('js', function() {
    gulp.src([assetDir+'/js/**/*.js', '!'+assetDir+'/js/vendor/**/*.js'])
        .pipe(concat('index.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
        .pipe(gulp.dest(outputDir+'/js'))
        .pipe(connect.reload()); // даем команду на перезагрузку страницы
});

gulp.task('images', function() {
    gulp.src(assetDir+'/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest(outputDir+'/img'))
});

gulp.task('connect', function() {
  connect.server({
    root: outputDir,
    livereload: true
  });
});

// Запуск сервера разработки gulp watch
gulp.task('watch', function() {
    // Предварительная сборка проекта
    gulp.run('stylus');
    gulp.run('csstouse');
    gulp.run('jade');
    gulp.run('images');
    gulp.run('js');
    gulp.watch(assetDir+'/stylus/**/*.styl', function() {
    gulp.run('stylus');});
    gulp.watch(assetDir+'/stylus/**/*.css', function() {
    gulp.run('csstouse');});
    gulp.watch(assetDir+'/template/**/*.jade', function() {
    gulp.run('jade');});
    gulp.watch(assetDir+'/img/**/*', function() {
    gulp.run('images');});
    gulp.watch(assetDir+'/js/**/*', function() {
        gulp.run('js');});
});

gulp.task ('default', ['watch','connect']);

var buildDir = 'build';
gulp.task('build', function() {
    // css
    gulp.src(assetDir+'/stylus/style.styl')
        .pipe(stylus()) // собираем stylus
    .pipe(myth()) // добавляем префиксы - http://www.myth.io/
    .pipe(csso()) // минимизируем css
    .pipe(gulp.dest(buildDir+'/css/')) // записываем css

    // jade
    gulp.src([assetDir+'/template/*.jade', '!'+assetDir+'/template/_*.jade'])
        .pipe(jade())
        .pipe(gulp.dest(buildDir))

    // js
    gulp.src([assetDir+'/js/**/*.js', '!'+assetDir+'/js/vendor/**/*.js'])
        .pipe(concat('index.js'))
        .pipe(uglify())
        .pipe(gulp.dest(buildDir+'/js'));

    // image
    gulp.src(assetDir+'/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest(buildDir+'/img'))

});

I remade my Gulpfile on the advice, but I remade the campaign badly, what's wrong? For me, he now endlessly compresses pictures until an error pops up.

var gulp = require('gulp'),
  jade = require('gulp-jade'),
  stylus = require('gulp-stylus'),
  csso = require('gulp-csso'),
  myth = require('gulp-myth'),
  imagemin = require('gulp-imagemin'),
  uglify = require('gulp-uglify'),
  concat = require('gulp-concat'),
    csscomb = require('gulp-csscomb'),
  connect = require('gulp-connect'),
    watch = require('gulp-watch'),
    sequence = require('gulp-sequence');
var autoprefixer = require('gulp-autoprefixer');	
var outputDir = 'public';
var assetDir = 'assets';

  // Собираем Stylus
// Собираем Stylus
gulp.task('stylus', function() {
    gulp.src('./assets/stylus/*.styl')
        .pipe(stylus()) // собираем stylus
    .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(autoprefixer())
    //.pipe(myth()) // добавляем префиксы - http://www.myth.io/
    .pipe(gulp.dest(outputDir+'/css/')) // записываем css
    .pipe(connect.reload()); // даем команду на перезагрузку css
});
// Собираем css
gulp.task('csstouse', function() {
    gulp.src('./assets/stylus/*.css')
    .pipe(autoprefixer())
    .pipe(gulp.dest(outputDir+'/css/')) // записываем css
    .pipe(connect.reload()); // даем команду на перезагрузку css
});

// Собираем html из Jade

gulp.task('jade', function() {
    gulp.src([assetDir+'/template/*.jade', '!'+assetDir+'/template/_*.jade'])
        .pipe(jade({
            pretty: true
        }))  // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
        .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(gulp.dest(outputDir)) // Записываем собранные файлы
    .pipe(connect.reload()); // даем команду на перезагрузку страницы
}); 

// Собираем JS
gulp.task('js', function() {
    gulp.src([assetDir+'/js/**/*.js', '!'+assetDir+'/js/vendor/**/*.js'])
        .pipe(concat('index.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
        .pipe(gulp.dest(outputDir+'/js'))
        .pipe(connect.reload()); // даем команду на перезагрузку страницы
});

gulp.task('images', function() {
    gulp.src(assetDir+'/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest(outputDir+'/img'))
});

gulp.task('connect', function() {
  connect.server({
    root: outputDir,
    livereload: true
  });
});

// Запуск сервера разработки gulp watch
gulp.task('watch', function() {
    watch(assetDir+'/stylus/**/*.styl', function() {
    gulp.run('stylus');});
    watch(assetDir+'/stylus/**/*.css', function() {
    gulp.run('csstouse');});
    watch(assetDir+'/template/**/*.jade', function() {
    gulp.run('jade');});
    watch(assetDir+'/img/**/*', function() {
    gulp.run('images');});
    watch(assetDir+'/js/**/*', function() {
        gulp.run('js');});
});

gulp.task ('default', sequence(['stylus','jade','js'],'images','csstouse','watch','connect'));

Answer 1

Doesn't the process slow down with such a gulp file?
I would change the built- gulp.watchin to gulp-watch. Well, if necessary, manually pull connect.
Something like this (simplified):

var watch = require('gulp-watch');

gulp.task('watch', function () {
  watch(path.html, function (e, c) {
    gulp.start('html');
  });
  watch(path.js, function (e, c) {
    gulp.start('js');
  });
  watch(path.css, function (e, c) {
    gulp.start('css');
  });
  // итд
});

gulp.task('html', function () {
  return gulp.src(path.html)
    .pipe(gulp.dest(path.html))
    .pipe(connect.reload());
});
// итд на все таски

Well, you should not rely on gulp to launch dependent tasks. I am using gulp-sequence:

var sequence = require('gulp-sequence');

gulp.task('default', sequence('del', ['html', 'js', 'css', 'img', 'fonts'/* итд */], 'connect', 'watch'));

Answer 2

how did you decide?

Answer 3

This solution helped, with the gulp-wait plugin .

const wait = require('gulp-wait');

gulp.task('html', function() {
  return gulp.src(path.html)
    .pipe(gulp.dest(path.html))
    /* wait */
    .pipe(wait(200))
    .pipe(connect.reload());
});