Андрей Dobrin

С этой штукой Ты сможешь разрабатывать приложения с высокой скоростью и комфортом.
Webpack Dev Server позволяет тебе запускать локальный сервер (на твоем ПК) и следить за изменениями всех, необходимых для разработки файлов, автоматически. То есть, тебе не придется перезапускать проект, чтобы обновить изменения.

в консоль пишешь:
npm i webpack-dev-server

в package.json в поле scripts добавляешь вот такие вот команды:

"scripts": {
    "commandName": "webpack-dev-server",
  }

Где commandName название твоей команды.

Простой конфиг:

devServer: {
        port: 8888, // определяет порт 
        overlay: { // показывает ошибки или предупреждения при разработке
            warnings: boolean,
            errors: boolean
        },
        open: true, // открывает окно браузера
    }

и еще куча многих опций, типа http/https/https2/hot/host/filename и т.д.

Можете таск server засунуть, наоборот, в watcher:
Для простоты, создайте переменную с настройками сервера:

var config = {
server: {
        baseDir: "src/"
    }
}

Watcher будет выглядеть так:

gulp.task('watch', function(){
  browserSync.init(config);
  gulp.watch("src/less/*.less", gulp.series("less")); 
--> x
})

Где Я поставил крестик, можно пихать еще файлы для просмотра вместе с методом gulp.series или gulp.parallel. Их разница в порядке выполнения тасков. Я рекомендую использовать gulp.series для подобных тасков.