Как выглядит современный процесс верстки?

Не уверен что начинающим верстальщикам нужно заморачивать себе голову всем этим ужосом:) Но может кому-то и пригодится:
- создаю новый проект на базе немного допиленного Optimized4HTML (можно копировать папку руками, можно сохранить в PhpStorm как темплейт, второе разумеется удобнее). Проект имеет следующую структуру:

- открываю его в PHPStorm, через командную строку устанавливаю пакеты и запускаю вотчер со следующей конфигурацией:

(таким образом отслеживаются изменения в файлах index.html, *.scss, common.js, а так же релодится браузер; в процессе верстки просто перескакиваем на виртуальный рабочий стол с открытым сайтом и сразу видим изменения, а если есть второй монитор то вообще песня). Кстати, перечень пакетов ннада?

- из плюшек emmet и sass обязательно, в качестве таскранера - gulp.
- макеты у меня в .sketch, так же кто не пробовал советую попробовать Figma, получите практически скетч в браузере. Adobe Photoshop не люблю. Adobe XD не пробовал, но осуждаю. Здесь наверное больше дело вкуса и реалий, в которых вы работаете (например, в каком формате получаете макеты, какая ОС на рабочем компе).
Вроде все просто. Что непонятно - спрашивайте, отвечу.

UPD. Optimized4HTML недавно перешел на Gulp 4, советую попробовать. Учтите, что Gulp 4 не имеет обратной совместимости с галпфайлами предыдущей версии, так как немного изменился синтаксис.

Меня, вероятно, закидают тапками, но я так же как и Вы и как Юпитер Макс верстаю старым дедовским методом)

Но есть и и другие современные методы.

+ С помощью сборщиков: gulp (уже устарел) , webpack.
Быстро собирают все файлы, минимизируют css\js файлы, оптимизируют картинки, установка необходимых бибилиотек и прочее.

+ С помощью препроцессоров: css - sass\scss\less, html - pug.

+ С помощью js фреймворков: vue, react, ...

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

Препроцессоры, как по мне, тоже не совсем удобные инструменты. Автопрефиксы есть в emmete любого редактора кода, т.е. уже не нужно писать\вставлять дополнительные sass\less ф-ии и прочие возможности препроцессора (миксины, экстенды, переменные, ... ) проще и быстрее написать ручками простым css)

Это все лично мое мнение.

да полно пакетных сборщиков, но я к примеру до сих пор работаю так же как и вы. Никаких проблем это не создает. Главное, чтобы все работало. )

• Верстаю в PHPStorm (просто потому что ещё и работаю с backend кодом на PHP).
  
• Для написания HTML использую Twig (т.к. нравится синтаксис и можно потом без переделки использовать шаблоны на backend'е). Использование шаблонизатора для вёрстки сильно помогает если надо сверстать более 1-2 страниц
  
• Для написания стилей использую SCSS + свою библиотечку + несколько PostCSS плагинов.
  
• Макеты - в Photoshop, InVision или Zeplin, смотря в чём отдают.
  
• Для обычных картинок - Photoshop + оптимизаторы (optipng, pngout, guetzli, xat).
  
• Для SVG иконок - Inkscape + руки + svgo, а затем организовываю всё это через icomoon.io, оттуда можно получить либо иконочный шрифт либо запакованный набор SVG элементов.
  
• Для сборки проекта использую Gulp с набором различных плагинов, список могу дать отдельно если интересно.
  
• Саму структуру проекта обычно просто копирую руками из проекта в проект. Можно конечно сделать какой-нибудь плагин для yeoman или что-то подобное, но меня не ломает скопировать пяток файлов, да и задачи бывают разные - просто вёрстка или вёрстка сразу в контексте сайта.
  

https://github.com/tars/tars

я использую
zeplin, WebStorm.
git через VCS WebStorm, очень удобно.

из плагинов
browser-sync,
gulp-nunjucks-render,
gulp.spritesmith
gulp-sass,
gulp-sourcemaps,
gulp-css-urlencode-inline-svgs
gulp-autoprefixer

иконки почти все спрайтами в отдельном файле

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="/images/svg-defs.svg#shape-codepen"></use>
</svg>

https://css-tricks.com/svg-sprites-use-better-icon...

еще недавно использовал Inkscape, что бы отредактировать svg с добавленными классами, illustrator почему то вырезает классы

Пробовал множество разных вариантов верстки, от самого "ручного" до webpack или gulp. В итоге понял, что если сайт не SPA, а просто лендинг или корпоративный многостраничник, то идеальным по скорости подготовки и удобству лично для меня является алгоритм:
1. Папка обычной структуры index.html + /img + /css + /js + /fonts + /sass .
2. Сразу инициализирую репозиторий (использую битбакет, а не гитхаб).
3. Открываю папку в VSCode, копирую настройки из любого другого проекта для плагинов.
3.1. Если только начинаем использовать VSCode, то нужно сразу поставить плагин для автокомпиляции Sass в CSS в онлайн режиме (Live Sass Compiler), этот плагин на лету конвертит код + сразу автопрефиксера функционал имеет + css map + минификация. Один раз настраиваем его для всех проектов.
3.2. Ставим Live Server, один раз настраиваем его для всех проектов.
3.3. Подключаем репозиторий во вкладке для репозиториев в VSCode
4. Всё, начинаем работать.
Я пропускаю шаг по настройке VSCode всякими мелочами типа линтеров, подсвечивалок кода, и прочего, тут кому что удобнее.

Такая связка позволяет использовать один инструмент (VSCode) для комфортной и быстрой верстки, если все в норме настроено, то я пишу\правлю код и тут же сразу всё вижу в браузере, не нужно ни обновлять ничего не подтягивать, ни ставить плагины в браузеры. Sass использую давно, ИМХО, ускоряет написание стилей в разы, и это при том, что не использую обычно даже миксины, максимум иногда готовые куски кода, а так обычно только дерево делаю через &, чтобы не писать по BEMу длиннющие цепочки руками и переменные через $.

Если идем дальше и уже верстку натягиваем куда-то, то добавляется еще и OpenServer, и все файлы переносятся в локальную папку виртуального сайта, перебиваются пути и все происходит точно также.
Изображения оптимизирую руками, не знаю почему, привычнее и быстрее, обычным tinypng или встроенными PageSpeedIns инструментами.

WebPack и Gulp много раз пробовал, и через OptimizeHTML, о котором выше писали, но не зашли на простых и средних проектах, слишком много всего нужно настраивать и подключать постоянно, что-то отваливается или криво работает, постоянно отвлекаешься на то, чтобы разобраться почему и что происходит. Ну и огромные папки получается, с нодовскими либами, бейбелами и прочими вещами, которые реально усложняют жизнь.

Для SPA, когда нужен React или Vue тут да, webpack, а на простой верстке - лишнее.
Как-то так, спрашивайте, критикуйте)

Webpack сборки, можно Webpack + Gulp. Миксины SCSS, BEM методология. Макеты из Adobe XD или Zeplin. Результаты обязательно лить в гит,гитлаб. А то недавно ssd накрылся и фсе если б не было в гите))