Есть несколько сторон вопроса:
- Часто повторяющиеся рутинные действия, вроде копирования файлов, выделения critical css или обработки картинок. Для этого есть gulp + плагины под конкретные задачи.
- Разделение кода по модулям, добавление синтаксических возможностей, убирание мусора из кода. Вопрос удобства и ускорения ориентирования по нему. Обычно это pug, less, postcss, в частности autoprefixer, ну и babel, куда без него.
- Это все нужно собрать. Тут webpack или снова gulp + плагины. Можно webpack запускать через gulp, как одну из задач. Ну и browsersync, чтобы руками не перезагружать страницу.
- Ускорение написания кода. Тут emmet + умение работать с текстовым форматом как таковым. Порой vim с множественными курсорами кажется чем-то космическим.
- Страховки от ошибок - w3c validator, stylelint, doiuse, eslint, sonarjs. Сильно недооцененная тема, но экономит много времени на отладке.
Конкретные инструменты - это всегда вопрос личных предпочтений, но общий посыл должен быть понятен - автоматизируем все, что можно, предохраняемся по максимуму, и потом учимся работать с текстом. А дальше упираемся в то, что руки работают быстрее головы. И чем сложнее дизайн, чем сильнее задачи выходят за рамки повседневности, тем меньше значение скорости, там эти все инструменты скорее дают просто комфорт. Не нужно думать о том, о чем думать не обязательно.
Простой
Средний
