Vitalik

const fillArray = count => 
  (new Array(count)).fill(1).map((item, i) => i + 1)

const fooBar = array =>
  array.map(number => 
    !(number % 3) && !(number % 5) 
    ? "FooBar"
    : !(number % 3) ? "Foo"
    : !(number % 5) ? "Bar" : number
  )

fooBar(fillArray(100))

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

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

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

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