В Gulp таск watch останавливается если есть таск сжатия картинок?

Question

[Lector]

Суть такая, что есть один таск по сжатию картинок, когда я его добавляю в watch то все компилируется но watch останавливается после того как все сделал и не открывает браузер(browser-sync). Ошибок нет. Стоит только его убрать то watch нормально работает пока его не остановить и browser-sync срабатывает. Может я чего упустил? Вот код gulpfile.js

let gulp = require('gulp'),
	gp = require('gulp-load-plugins')(),
	imageop = require('gulp-image-optimization'),
	pngquant = require('imagemin-pngquant'),
	mozjpeg = require('imagemin-mozjpeg'),
	imageminWebp = require('imagemin-webp'),
	browserSync = require('browser-sync').create();

gulp.task('serve', function () {
	browserSync.init({
		server: {
			baseDir: "./build"
		}
	});
});

// сжатие html
gulp.task('html', function () {
	return gulp.src('dist/**/*.html')
		.pipe(gp.changed('dist'))
		.pipe(gp.htmlmin({
			collapseWhitespace: true
		}))
		.pipe(gulp.dest('build'))
		.on('end', browserSync.reload);
});

// конвертация в css, добавление префиксов, сжатие, карта 
gulp.task('sass', function () {
	return gulp.src('dist/sass/**/*.+(sass|scss)')
		.pipe(gp.changed('dist'))
		.pipe(gp.sourcemaps.init())
		.pipe(gp.sass())
		.pipe(gp.autoprefixer({
			browsers: ['last 10 versions']
		}))
		.on("error", gp.notify.onError({
			message: "Error: <%= error.message %>",
			title: "Error running something"
		}))
		.pipe(gp.csso())
		.pipe(gp.sourcemaps.write())
		.pipe(gulp.dest('build/css'))
		.on('end', browserSync.reload);
});


// объединение библиотек в один сжатый файл
gulp.task('scripts-libs', function () {
	return gulp.src(['node_modules/jquery/dist/jquery.min.js',
			'node_modules/slick-carousel/slick/slick.min.js'
		])
		.pipe(gp.concat('libs.min.js'))
		.pipe(gp.uglify())
		.pipe(gulp.dest('build/js'))
		.on('end', browserSync.reload);
});

// сжатие скриптов
gulp.task('scripts', function () {
	return gulp.src('dist/scripts/**/*.js')
		.pipe(gp.changed('dist'))
		.pipe(gp.uglify())
		.pipe(gulp.dest('build/js'))
		.on('end', browserSync.reload);
});


// сжатие картинок
gulp.task('compress-img', function () {
	gulp.src('dist/img/*')
		.pipe(gp.imagemin({
			interlaced: true,
			progressive: true,
			quality: '70-90',
			optimizationLevel: 4,
			svgoPlugins: [{
				removeViewBox: true
			}],
			floyd: 1,
			speed: 1,
			use: [
				pngquant(),
				mozjpeg({
					progressive: true
				}),
				imageminWebp({
					method: 6,
				})
			],
			verbose: true
		}))
		.pipe(gulp.dest('build/img'))
		.pipe(gp.rename({
			extname: '.webp',
			suffix: "-webp",
		}))
		.pipe(gulp.dest('build/img/webp'))
});


// слежка за изменениями в sass, html, scripts, img
gulp.task('watch', function () {
	gulp.watch('dist/**/*.html', gulp.series('html'));
	gulp.watch('dist/sass/**/*.+(sass|scss)', gulp.series('sass'));
	gulp.watch('dist/scripts/**/*.js', gulp.series('scripts'));
	gulp.watch('dist/img/**/*', gulp.series('compress'));
});



gulp.task('default', gulp.series(
	gulp.parallel('html', 'sass', 'scripts-libs', 'scripts', 'compress-img'),
	gulp.parallel('watch', 'serve')
));

если в последних двух тасках сделать так:

gulp.task('watch', function () {
	gulp.watch('dist/**/*.html', gulp.series('html'));
	gulp.watch('dist/sass/**/*.+(sass|scss)', gulp.series('sass'));
	gulp.watch('dist/scripts/**/*.js', gulp.series('scripts'));
	//gulp.watch('dist/img/**/*', gulp.series('compress'));
});



gulp.task('default', gulp.series(
	gulp.parallel('html', 'sass', 'scripts-libs', 'scripts'),
	gulp.parallel('watch', 'serve')
));

то все работает

Answer 1

[WapSter]

Перед gulp.src('dist/img/*') поставь return

Comments

[Lector]

Спасибо, помогло)

Answer 2

[ned4ded]

Вааай, ну и каша.

Для работы с gulp.series и gulp.parallel таск должен возвращать промис или поток. Также, в сигнатуру функции таска приходит колбек для вызова по завершению работы функции (если она асинхронная, не является потоком, etc) , ты можешь использовать его, хотя это и не нужно в данном случае. Сл-но тебе нужно либо добавить return gulp.src('dist/img/*');, либо вызвать колбек после пайпа:

gulp.task('compress-img', function (done) {
  gulp.src('dist/img/*')
  // ...
  done();
}

Первый вариант в данном случае будет более верным решением, но а второй чтоб ты просто знал на будущее. Он тебе может пригодиться для watch таска, например (если ты его захочешь запускать в серии).