In Gulp, does the watch task stop if there is an image compression task?

Question

gulp.js

The bottom line is that there is one task for compressing images, when I add it to watch, everything compiles, but watch stops after everything is done and does not open the browser (browser-sync). There are no errors. One has only to remove it, then watch works fine until it is stopped and browser-sync works. Maybe I missed something? Here is gulpfile.js code

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')
));

if in the last two tasks you do this:

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')
));

then everything works

Answer 1

Before gulp.src('dist/img/*') put return

Answer 2

Wow, well, porridge.
To work with gulp.series and gulp.parallel, the task must return a promise or stream. Also, a callback comes to the signature of the task function to call it upon completion of the function (if it is asynchronous, not a thread, etc), you can use it, although this is not necessary in this case. The next thing you need to do is either add return gulp.src('dist/img/*');or call the callback after the pipe:

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

The first option in this case will be a more correct decision, but the second so that you just know for the future. It can be useful for you for a watch task, for example (if you want to run it in a series).