Как повторно использовать gulpfile.js?

Вводишь команду в чистой папке
npm init
Отвечаешь на вопросы. Npm создаст package.json.
Далее устанавливаешь пакеты с ключами --save, -S или --save-dev, -D.
Первый для скриптов, используемых в проекте (библиотеки, фреймворки)
Второй для утилит (гальп, его плагины, линтеры, тесты)
Все пакеты буду прописываться в ваш package.json.

В дальнейшем, чтобы развернуть тот же самый проект, вам понадобятся только исходники проекта и файл package.json. Выполнив команду
npm install
вы одним махом установите все необходимые зависимости.

Как сделать такой scroll?

Самый быстрый вариант уже подсказали.
А самый лучший - https://github.com/Diokuz/baron
Собственно он такой же простой. Только Native scroll mechanic

Почему зациклилось gulp-autoprefixer?

вы перезаписываете один и тот же файл main.css.
Если бы вы код выложили НЕ картинкой, я бы скопипастил и поправил.
А так - вызов автопрефиксера перенесите в таск scss а задачу autoprefixer вообще уберите

Автоматическое обновление в Sublime Text 3 + BS работает только при сохранении документа, как сделать так чтобы стало как в Live Preview "на лету"?

Olek1: Да на этот вопрос вам уже ответили =)

Как вы решаете проблему маленького SSD на новых MacBook Pro?

Неужели мало? =)
У меня (не мак, но не суть) два ssd - 120gb(системный) + 60gb(рабочий, под проекты)
Около половины места на обоих свободно.
Думаю программисту для работы 256gb должно хватать =)

Автоматическое обновление в Sublime Text 3 + BS работает только при сохранении документа, как сделать так чтобы стало как в Live Preview "на лету"?

после нажатия ctrl+s в браузере сверху отображается всплывающее окошко и пишется что BS Connected и исчезает, разве BS не умеет быть всегда "connected"?

Немного странный вопрос )
Когда BS в состоянии инжектить изменения без перезагрузки всей страницы, то он это делает. Если это невозможно, он перезагружает страницу. Естественно, при перезагрузке страницы клиентская часть заново коннектится к серверной, отсюда и сообщение.

Автоматическое обновление в Sublime Text 3 + BS работает только при сохранении документа, как сделать так чтобы стало как в Live Preview "на лету"?

Olek1: BS инжектит стили без перезагрузки страницы. Вбить несколько правил и жмякнуть ctrl+s не сильно напряжно.
А если вам нужно отслеживать изменения каждого пикселя, то вы определенно что-то делаете не так =)

Маски файлов в Gulp-e?

Можно просто Евгений: плагин main-bower-files берет файлы из файлов bower.json каждого пакета. Секция main, если она есть.
Вы можете в своем корневом bower.json описать секцию override и указать для каждого пакета, какие файлы брать. Всё это описано в документации.

Background-position?

Значение в процентах это смещение левого края картинки,
которое равно = (ширина блока - ширина картинки) * процент
может быть отрицательным, если картинка шире блока

Может ли элемент выйти за body?

Почему картинка выходит за body в котором она находится ?

Потому что ее размер больше ширины body
Ваш Кэп.

Не присваивается font-weight через font-family?

Неправильно.

Правильно:

@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/OpenSansLight/OpenSansLight.woff") format("woff");
  // src конечно добавите все необходимые, просто для краткости здесь один файл
}
@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/OpenSansLight/OpenSansLightItalic.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/OpenSansLight/OpenSansRegular.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/OpenSansLight/OpenSansItalic.woff") format("woff");
}

/* использование */
.open-sans-light {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}
.open-sans-light-italic {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.open-sans-regular {
  font-family: "Open Sans", sans-serif;
}
.open-sans-italic {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Для FireFox есть хорошее расширение WebDeveloperToolbar. Оно много чего может полезного, в том числе показывать границы блоков.
Вероятно и для Хрома должно быть подобное расширение.

Какие курсы, книги и видео по изучению JQuery посоветуете новичку?

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

Какие курсы, книги и видео по изучению JQuery посоветуете новичку?

Виталий: Отрицая что-либо, предлагайте альтернативу.

Есть элементы списка, как их разместить в ряд по горизонтали?

.one { list-style: none; padding-left: 0; }
.two { display: inline-block; }
/* или */
.two { display: inline; }

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Андрей:
Да ты не пфыкай =) Просто попробуй сделать такую обводку бордерами всем элементам (неважно в какой модели) на странице с уровнем сложности выше "детского".

Нет бы слушать да на ус мотать, что умные дядьки говорят, а он пфыкает =))

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Андрей: Подробности в спецификации. Или в песочнице попробуй примеры сделать. Ты же взрослый =) должен знать как ведут себя различные бокс-модели.

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Андрей: content-box меняет внешние размеры, border-box - внутренние. Оба случая могут доставить проблем.

Как наглядно увидеть размеры блоков при создании сетки в CSS?

* {
  outline: 2px dotted red;
  outline-offset: -2px;
}

Нужно ли прикладывать к резюме свои самые старые проекты?

Встречают по одежке. Прикладывать нужно лучшее. Если старый код хороший, почему бы его не приложить.