Нужен опыт полной верстки сайта, а не какой-то отдельной части. Для этого скачивайте любой шаблон или можете мне в скайп постучать скину.
Начать работать с макетом по просмотру и вырезке с помощью Photoshop, когда уже осточертеет можете переходить на более современные вида Avocode.
Опытные верстальщики делают собственный шаблон для разработки. Тут нам и нужны уже сборщики в вида озвученного вами gulp(grunt, webpack и прочие). Настройка кому удобней.
Я для примера использую gulp+sass+autoprefixser+browersync.
HTML препроцессоры не зашли мне, стандартный emmet радует.
У каждого сугубо своё отношение к тому или иному "инструменту". Вам нужно набить обычные шишки и получить опыт, для понимания базовых вещей. Следовательно все по старинке верстать и разным методом. (float'ами, flex, block-table и табличная О_о (для электронных сообщений) ).
P.S. Удачного вам пути в это парой не благодарное дело :)