Почему gulp-connect делает reload с задержкой в 1 изменение?

Question

[Никита Нафранец]

Не знаю с чего проблема началась, но не давно livereload начал странно себя вести, а именно делать reload только через 1 изменение в файле. Обновляет он страницу всегда, но изменение на страницы появляются только после 2 изменений подряд. Т.е. добавляю на страницу Текст . Смотрю на страницу, не чего не появилось. Добавляю "1" к "Текст" и на странице появляется просто "Текст". Еще вчера все было нормально, а теперь такая фигня.
Вот 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'))

});

Переделал свой 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'),
    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

[beaverBox]

А у вас с таким gulp-файлом не тормозит процесс?
Я бы поменял встроенный gulp.watch на gulp-watch. Ну и по необходимости вручную дергать connect.
Как-то так (упрощенно):

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());
});
// итд на все таски

Ну и на запуск зависимых тасков не стоит полагаться на gulp. Я использую gulp-sequence:

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

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

Comments

[Никита Нафранец]

Чето, у меня теперь вообще не чего не работает. Я в этом деле херово шарил, а тот gulp файл был из гайда.

[beaverBox]

Dimensi: Что именно не работает?
Делайте постепенно, таск за таском.

[Никита Нафранец]

beaverBox: ну в основном gulp-imagemin, остальные таски время от времени без причинно зависают, и надо сделать ctrl+c, чтоб процесс продолжился. Может я не правильно написал?

[beaverBox]

Dimensi: разместите свой код на каком-нибудь jsfiddle.net

Answer 2

[vaskadogana]

как решил?

Comments

[vaskadogana]

из-за чего было?

[Никита Нафранец]

Ну проблема была в самом jade(pug на данный момент), pug обрабатывает все сразу, а не кеширует результаты, из-за чего с ув. размером шаблона, ув. время обработки, а сервер не дожидается пока pug обработает и запускает перезагрузку страницы. Ед. вариант это подключить gulp-changed и навесить его на jade, чтоб сервер лишний раз не перезагружал страницу.

gulp.task('pug', function() {
	gulp.src(path.pugs)
		.pipe(plumber(configs.plumberError))
		.pipe(pug(configs.pug))
		.pipe(changed(path.public, {
			extension: '.html',
			hasChanged: changed.compareSha1Digest
		}))
		.pipe(gulp.dest(path.public))
		.pipe(reload(configs.allowStreamReload));
});

[vaskadogana]

Никита Нафранец: Спасибо за ответ, уже решил.
если еще кому то понадобится, то решил так:

в конце такска релоад вместо .pipe(reload({stream: true}));
делаю вот так .on('end', browserSync.reload);

Answer 3

[Александр Викторович]

Помогло данное решение, с плагином gulp-wait.

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());
});

Comments

[Никита Нафранец]

)

[Александр Викторович]

Никита Нафранец, знаю что запоздалый ответ, может кому пригодиться )