Ivan Gavrilich

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

1) Обратимся к документации:

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать.

То есть getComputedStyle().style возвращает те стили, которые были установлены непосредственно в CSS, поэтому строка "50%" после обращения к значению бордер-радиуса - нормальное явление.

2) Скорее всего, здесь без дополнительных вычислений не обойдётся, из коробки нельзя получить значение border-radius в пикселях, если оно было задано в процентах.

У вас ошибка в строке if (theme.getAttribute("href" == "css\main.css")). Вы некорректно разместили условие, указав его в аргументах метода getAttribute.

Попробуйте заменить это на if (theme.getAttribute("href") == "css\main.css")

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

Ошибка

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.

Вызываете с помощью @include, первым аргументом указываете свойство в кавычках, вторым аргументом оригинальный размер, третьим аргументом размер на 320px.

@mixin retina-property($property, $startSize, $minSize) {
  $additionalSize: $startSize - $minSize;

  #{$property}: calc(
    #{$minSize + px} + #{$additionalSize} * ((100vw - 320px) / #{$maxWidth - 320})
  );
}

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

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'