В каком порядке это учить?

Имхо, не надо искусственно что-то учить в отрыве от реальности. Определите изучаемый стек. Берите и пилите реальный проект. На самом деле нужно изучить гораздо больше всего (!!! демонический смех !!!). Но изучать надо не в вакууме. Тогда и интереснее будет и ближе к практической плоскости.

Все что вы скинули, всего лишь прикладные инструменты, учить их не нужно, это не фундаментальные вещи, такие как паттерны и алгоритмы.
webpack\gulp - вы будете настраивать 1-2 раза, и дальше работать с ними(достаточно понять принцип работы, взять готовые решения, переписать код с готовых решений что бы понять что он делает и тд). Все остальное - не учится в отрыве от проектов которые вы можете делать на досуге, что бы поднимать свой скилл. Условно вы приходите на работу, где люди пользуются webpack - скорее всего внутри компании он уже настроен под конкретный продукт или решение, и вам даже настраивать его не дадут) Так что в порядке ознакомления.
Одназначно ознакомьтесь с git(который у вас не написан), вот он вам 100% пригодится в любом месте.

Из всего перечисленного только ajax. Gulp и webpack достаточно понять принцип работы, babel вообще учить не нужно, yarn и npm почти одинаковые инструменты запомнить несколько команд и все. Ну а так ajax, json, npm(yarn), gulp (webpack). Хотя если не знаешь, что такое ajax и json стоит сначала выучить js

Ставьте цель и шаг-за-шагом двигайтесь к ней.
1. Не знаете как сделать - смотрите в документации или ищите в гугле.
2. Написали код - проверили.
3. GOTO 1

Будете пытаться учить без цели - зря потратите время: ничего не осознаете.

Вот если конкретно по вашему списку, довольно просто распутаться, привожу алгоритм.

1. Вникнуть в определения технологий в общих чертах. Ответить себе на вопросы: что это? для чего это?
Например, json - это формат представления данных.
А npm и yarn - менеджеры пакетов. Бабель, вебпак и галп без одного них не установишь, нужно будет хотя бы установить, узнать основы синтаксиса и распространенные команды.
Учить все-все команды и глубоко залезать в тему можно, но зачем вам это сейчас? Нужно ли вам вот прям сейчас знать, как публиковать собственные пакеты?
Не думаю. А что нужно?
Наверное, устанавливать и удалять пакеты. Возможно проверять обновления и обновлять, смотреть список установленных. Итого, 5-10 команд/флагов для первого знакомства хватит с головой.

И так далее. Судя по форме вопроса, вам сейчас из этого вообще ничего не нужно, потому как создается впечатление что о назначении этих инструментов вы не размышляли. У вас в списке: формат данных, два менеджера пакетов, 2 грубо говоря сборщика, 1 js технология и транскомпилятор.

Сможете понять, что это за штуки -> станет ясно, для чего они вам могут понадобиться и в каком порядке их изучать.
Самое очевидное: вы просто не сможете установить вебпак или галп без менеджера пакетов, а значит и изучать их не сможете. А еще там node.js нужен для работы - вот вам еще список расширил)

Дальше: присоединюсь к мнениям выше - ставьте себе задачу (проект) и решайте ее (делайте проект). Внедрите интересующие инструменты и делайте.
Без практики научиться не получится. Медитировать над инструментами в отрыве от реальности можно до пенсии и ни к чему не прийти, потому как сам инструмент используется для чего-то, и без этого самого чего-то он абсолютно бесполезен и изучать его бессмысленно.