Grunt, Gulp and npm scripts are mostly used task runners and browserify, brunch and webpack are mostly used as module bundlers. Task runners are good tools for specific task such as transpiling, linting, etc. However, for splice various files together and produce single bundle file module bundlers are required.
Grunt is highly configurable. All grunt tasks have a set of configuration options therefore user can set those accordingly to meet their specific needs. Also, they provide ability to define custom tasks and combine multiple tasks to a single task. Grunt has more than five thousand predefined plugins available.
In typical grunt task files are read, modify and write to temp location and same repeat for other tasks as well. The final task will write file to the destination location.
Gulp makes more efficient way for continuous integration, testing and development. It helps in creating production build with minify, concatenation, vendor prefixes, less to CCS compilation, injecting files in to HTML, unit testing, code analysis. Gulp with tasks for code quality, tests and build pipeline results in improve quality, fast delivery in repeatable and consistent manner.
Gulp has four simple API's gulp.task, gulp.src, gulp.dest and gulp.watch. In gulp, output files are piped between tasks. Gulp uses streams. So files are stored in memory streams, modification of files by the tasks are performed on same streams. Elimination of temporary file writing results in less disk operation and makes the gulp faster.
Node provides an another approach to implement build with npm and package.json. It gives you the best option over other task runners such as grunt and gulp. npm is part of node system. Hence no additional tools or plugins are required. npm scripts can be used for linting, compilation, clean destination, less to CSS, bundling and minifying tasks. Pre and Post hooks scripts for npm scripts are available, which can be configured to run before or after the npm scripts. Also, npm scripts can be run on concurrent or parallel manner.
Webpack is a module bundler. It uses modular systems to bundle files in right order.It provides a unique way to combine js, css, image, fonts in to one bundle.js file. Only constraint with webpack is internally project should use any one of the modular systems (AMD, CommonJs or ES6). Also, webpack works well with npm scripts for tasks.
Webpack can be think as specialized task runner, which can do all the tasks that task runners can do (transpilation, concatenation and minification). Additionally, it will give a feature of combine your CSS to java scripts and same can be done with html, images and fonts.