В чем разница между Task runner и сборщиком?

Task runner и сборщик (bundler) — разные инструменты: task runner автоматизирует произвольные задачи (последовательности команд), а сборщик объединяет модули и ресурсы в бандлы для браузера.

Task runner

Автоматизирует задачи: запуск команд, копирование файлов, компиляция, тесты, минификация — как «скрипты сборки»:

// Gulp
gulp.task('styles', () => gulp.src('*.scss').pipe(sass()).pipe(gulp.dest('dist')));

Примеры: Gulp, Grunt, npm scripts.

• Оркестрирует произвольные шаги пайплайна.
• Не знает про граф зависимостей модулей.

Сборщик (bundler)

Строит граф зависимостей от точки входа и объединяет модули (JS, CSS, ассеты) в оптимизированные бандлы:

// Webpack/Vite: entry → граф → bundle

Примеры: Webpack, Vite, Rollup, esbuild.

• Разрешает import/require, tree shaking, code splitting.
• Понимает зависимости модулей.

Главное различие

• Task runner — автоматизация произвольных задач (последовательность команд).
• Сборщик — объединение модулей в бандлы по графу зависимостей.

Современность

Раньше связку «Gulp/Grunt (task runner) + бандлер» использовали вместе. Сейчас сборщики (Webpack/Vite) взяли на себя большинство задач, а роль task runner часто выполняют npm scripts:

"scripts": { "build": "vite build", "test": "vitest" }

Коротко для собеседования

Task runner (Gulp, Grunt, npm scripts) автоматизирует произвольные задачи — последовательности команд (компиляция, копирование, тесты). Сборщик (Webpack, Vite) объединяет модули и ресурсы в бандлы по графу зависимостей (tree shaking, code splitting). Сейчас бандлеры + npm scripts вытеснили классические task runner.