Ivan Gavrilich

Либо устанавливайте версию gulp-imagemin ниже 8.0, либо импортируйте в синтаксисе ESM, как написал Александр.

Стоит научиться читать ошибки и гуглить, и Вы столько времени сможете себе сэкономить.

Ошибка

AssertionError [ERR_ASSERION] Task never defined: server

доходчиво говорит Вам, что таск server, который Вы используете в gulp.parallel('watch', 'server', 'style'), неопределён.

Для сервера я у Вас вижу таск 'browser-sync', его Вам и нужно использовать, либо переименовать его в 'server'.

P. S. на будущее, оформляйте код в вопросе внутри тега < code >, либо через JSFiddle или CodePen. С кодом в скриншоте неудобно работать + скриншоты кода запрещены правилами Хабра.

В Вашем случае ошибка dest.on is not a function возникает из-за того, что что-то, вызываемое в вашем пайплайне не является потоком.

Скорее всего, проблема в 40 строке .pipe(ttf2woff2). Дело в том, что данная функция не вызвана и, соответственно, не возвращает поток.

Замените .pipe(ttf2woff2) на .pipe(ttf2woff2()), и ошибка должна исчезнуть.

Моё решение данной проблемы:

Инициализируем переменную watching (или любое другое название, это не играет значения) и присваиваем ей значение false, затем внутри таска Pug инициализируем плагин emitty:

const emittyPug = emitty.setup('src', 'pug', { makeVinylFile: true })

Затем возвращаем промис, внутри которого сканируем глобальную переменную emittyPugChangedFile (она будет нужна, чтобы потом присвоить ей необходимое значение в gulp.watch()). Также не забудьте функции таска Pug указать аргумент-коллбэк (в данном случае done), так как Gulp может жаловаться на отсутствие асинхронного завершения.

return new Promise(() => {
  emittyPug.scan(global.emittyPugChangedFile).then(() => {
    .src()
    ...
    .pipe(gulpif(watch, emittyPug.filter(global.emittyPugChangedFile)))
    ...
    dest()
  })

  done()
});

Затем в начале вашей функции serve присвойте переменной watching значение true и напишите следующий gulp.watch() для Pug:

watch(['src/pages/**/*.pug', 'src/components/**/*.pug'], pugHandler).on('all', (event, filepath) => {
  global.emittyPugChangedFile = event === 'unlink' ? undefined : filepath; 
});

После этих действий сборка должна стать инкрементальной. Также вы можете всё это рассмотреть на примере моей собственной сборки: gulpfile, Pug-таск, watch.

Вы можете использовать сборку от Фрилансера по жизни. В видео он подробно описывает каждую часть сборки, а сама сборка получается очень функциональной.

Плагин gulp-newer создан для того, чтобы отслеживать удаление/добавление файлов, за обработку файлов он не отвечает. Для вашей задачи (компиляция файлов по отдельности) подходит плагин emitty.

Таск сервера должен быть асинхронным, иначе Галп не может определить, когда закончится данная задача, и продолжить своё выполнение. Способов решить эту проблему достаточно много, но проще всего в конце таска сервера просто вернуть функцию-коллбек:

gulp.task('server', function(done) {

    browserSync({
        server: {
            baseDir: "src"
        }
    });

    gulp.watch("src/*.html").on('change', browserSync.reload);

    done();
});

Установите gulp-plumber. Он будет обрабатывать ошибки и не давать Галпу прерывать сервер.

Просто вставьте его в начале таска пайпом:

import plumber from 'gulp-plumber';
// or
// const plumber = require('gulp-plumber');

function scripts() {
  return src(['app/js/*.js', '!app/js/*.min.js'])
    .pipe(plumber())
    .pipe(webpackStream({
      mode: 'production',
      performance: { hints: false },
      plugins: [
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), // jQuery (npm i jquery)
      ],
      module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                plugins: ['babel-plugin-root-import']
              }
            }
          }
        ]
      },
      optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            terserOptions: { format: { comments: false } },
            extractComments: false
          })
        ]
      },
    }, webpack)).on('error', function handleError() {
      this.emit('end')
    })
    .pipe(concat('app.min.js'))
    .pipe(dest('app/js'))
    .pipe(browserSync.stream())
}

function validate () {
  return src('.')
    .pipe(plumberSmart())
    .pipe(through2(function (file, enc, callback) {
      callback(new PluginError({
        plugin: 'validate',
        message: `${chalk.underline('Привет я строка 1')}\n${chalk.cyan('Привет я строка 2')}\n\nЯ подведение итогов`
      }))
    }))
}

Вероятно, вы используете del версии >7.0.0. С последнего релиза этот плагин перешёл на ESM. Чтобы исправить ошибку, импортируйте плагин таким образом:
import { deleteSync } from 'del'

В релизе 7.0.0 плагин del перешёл на ES модули. Чтобы плагин заработал, измените
import del from 'del'
на
import { deleteSync } from 'del'