Что использовать в своем Front-End workflow?

По своему небольшому опыту могу сказать, что хотя в большинстве вакансий в сфере front-end и присутствуют строчки вроде gulp/less/sass и т. д. но на собеседованиях этому большое внимание не уделяют, то есть знаешь ну хорошо плюсом будет, но маловероятно что если вы подходите по навыкам и знаниям то вас не возьмут потому что вы использовали раньше less а не sass, почему так? ну, у меня конечно нет статистики подробной но я уверен что большинство верстальщиков, фрилансеров, front-endщиков и т.д. не используют препроцессоры на полную мощь, переменные, вложенные селекторы, пара примесей это все конечно хорошо, но если использовать препроцессор на таком уровне то перейти с одного на другой не составит никакого труда и в принципе на небольших проектах только этим и пользуются, оно и понятно. Другое дело крупные проекты где подходят уже более основательно к выбору препроцессора, смотрят так сказать именно его "фичи" и чем он отличается от своих аналогов (мы сейчас не про синтаксис говорим), но в любом случае если вы делаете, на сколько я понял, относительно небольшие проекты, вы всем этим пользоваться не будете, то есть знаний на уровне: "да использовал этот препроцессор в работе", на мой взгляд более чем достаточно, потому что, как уже сказал, на том уровне, на котором препроцессоры использует большинство разработчиков (занимающихся небольшими проектами) они отличаются не сильно

Поделюсь workflow front-end разработки на TARS. Отличный инструмент для легкой разработки фронтенда.

>Вроде Gulp мне лучше чем Grunt, но последний более популярен.
Сейчас только gulp и юзают.

Популярно не значит хорошо, можно провести аналогию с мостом.
Если коротко, с чем удобней работать и что решает ваши задачи, то и используйте.
Какой сборщик использовать особой разницы нет.
Лично я использую Gulp + пакеты к нему автопрефиксер, генератор спрайтов, генератор стилей для шрифтов, сжатие картинок, browsersync, минимизация CSS/JS, SASS и для меня этого пока достаточно.
Все это можно делать и в Grunt, другое дело что есть разница в скорости сборки.

Между Gulp и Grunt особой разницы нету, переход доставляет некоторые неудобство, но по возможностям одинаковы. Gulp старается параллелизовать все таски, насколько возможно, поэтому может быть быстрее.

Jade, наверное, самый мощный шаблонизатор, но только для html/xml, для текста не очень удобно.

Ну и Bower, но тут особо нету вариантов, в отличии от 3-х предыдущих.

Ну вообще-то npm.

Обратите внимание на Webpack. Это новая альтернатива gulp/grunt. Если пишете яваскрипт, рекомендую смотреть в сторону компонентной разработки (React/Web Components), и конечно es6/7

Ну и Bower, но тут особо нету вариантов, в отличии от 3-х предыдущих.

npm init
npm install jquery --save-dev

Также Stylus вроде как только набирает популярность

между всеми тремя настолько мало различий, что можно пользоваться всеми одновременно

Gulp мне лучше чем Grunt

гульп лучше, тем что все параллельно запускает. Плагинов куча под оба

С теоретической точки зрения, стоит вводить по одной новой технологии в каждом проекте
6 - перебор

я коноечно ещё только начинаю свой путь разработчика но уже потихоньку прихожу к приглянувшемуся мне workflow
- npm (элементарно устанавливать gulp и есго можули с прочими зависимостями)
- gulp (и грядка модулей для сборки - run-sequence, del, gulp-sourcemaps, gulp-autoprefixer, gulp-concat, browser-sync, gulp-uncss, gulp-changed, gulp-imagemin, gulp-jscs ...... etc)
- jade как html template engine
- в плане CSS препроцессором не определился ещё но Stylus вроде подаёт надежды на светлое будущее ну и SCSS (SASS) поскольку многие используют
- в плане JS пока чистый стараюсь пользовать чтоб матчасть познать, но не брезгую применением jQuery, AngularJS и прочими свистелками и перделками )))
- в качестве IDE пользую WebStorm

на данном этапе развития фронтэнд девелопера мне кажется это вполне разумным набором

Попробуйте использовать мой велосипед
gulp-front