gruntjs - NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack -

i'm trying summarize knowledge popular javascript package managers, bundlers, , task runners. please correct me if i'm wrong:

• npm & bower package managers. download dependencies , don't know how build projects on own. know call webpack/gulp/grunt after fetching dependencies.
• bower npm, builds flattened dependencies trees (unlike npm recursively). meaning npm fetches dependencies each dependency (may fetch same few times), while bower expects manually include sub-dependencies. bower , npm used front-end , back-end respectively (since each megabyte might matter on front-end).
• grunt , gulp task runners automate can automated (i.e. compile css/sass, optimize images, make bundle , minify/transpile it).
• grunt vs. gulp (is maven vs. gradle or configuration vs. code). grunt based on configuring separate independent tasks, each task opens/handles/closes file. gulp requires less amount of code , based on node streams, allows build pipe chains (w/o reopening same file) , makes faster.
• webpack (webpack-dev-server) - me it's task runner hot reloading of changes allows forget js/css watchers.
• npm/bower + plugins may replace task runners. abilities intersect there different implications if need use gulp/grunt on npm + plugins. task runners better complex tasks (e.g. "on each build create bundle, transpile es6 es5, run @ browsers emulators, make screenshots , deploy dropbox through ftp").
• browserify allows packaging node modules browsers. browserify vs node's require amd vs commonjs.

questions:

1. what webpack & webpack-dev-server? official documentation says it's module bundler me it's task runner. what's difference?
2. where use browserify? can't same node/es6 imports?
3. when use gulp/grunt on npm + plugins?
4. please provide examples when need use combination

webpack , browserify pretty same job, bundling modules used in browser environment (though can target other environments, bundling server-side es6 code node). example node module feature, doesn't exist in browser, , es 6 modules not implemented in browser yet, why things need bundled. however, differ in many ways, webpack offers many tools default (e.g. code splitting), while browserify can after downloading plugins, using both leads similar results. comes down personal preference (i used webpack). webpack not task runner, processor of files (it processes them called loaders) run directly cli or task runner.

webpack-dev-server provides browsersync - server, can deploy app , verify fe developing progress dev-server automatically refreshing browser or propagating changes without hot deploy (e.g. react components).

i've been using gulp conciseness , easy task writing, have later found out need neither gulp nor grunt @ all. have ever needed have been done using npm scripts run 3rd-party tools through api. choosing between gulp, grunt or npm scripts depends on taste, js experience , experience of developers working you.

while tasks in gulp (or grunt maybe) easy read people not familiar js, yet tool require , learn, , prefer narrow dependencies , make things simple. on other hand, replacing these tasks combination of npm scripts , run files (where configuration , execution function of tools webpack lies) more challenging. in majority of cases, 3 equal in terms of results.

as examples, suggest have @ react starter project, shows nice combination of npm scripts, webpack , browsersync. can find npm scripts in package.json in root folder, in property named scripts. there encounter commands babel-node tools/run start. babel-node cli tool (not ment production use), @ first compiles es6 file tools/run (run.js file located in tools) - runner utility. runner takes function argument , runs it, in case start - utility (start.js) responsible bundling source files (both client , server), starting node-express server , subsequently browsersync, serves proxy propagating development changes browser.

speaking more precisely, start.js imports webpack config client, manipulates add hot module replacement capabilities, creates both client , server side bundles, starts node server through yet utility named runserver.js , after successful start inits browsersync, looks this.

const bs = browsersync.create();   bs.init({       ...(debug ? {} : { notify: false, ui: false }),        proxy: {         target: host,         middleware: [wpmiddleware, ...hotmiddlewares],       },        // no need watch '*.js' here, webpack take care of us,       // including full page reloads if hmr won't work       files: ['build/content/**/*.*'], }, resolve) 

the important part proxy.target, set server address want proxy, http://localhost:3000, , browsersync starts server listening on http://localhost:3001, same app deployed, hot module replacement, can experience propagation of source file changes browser or without reloading. can see, there configuration property files individual files or patterns browsersync watches changes , reloads browser, if occur, comment says, webpack takes care of watching js sources hmr, cooperate there.

now don't have equivalent example of such grunt or gulp configuration, gulp (and grunt) write individual tasks in gulpfile.js like

gulp.task('bundle', function() {   // bundling source files gulp plugins gulp-webpack maybe });  gulp.task('start', function() {   // starting server , stuff }); 

where doing pretty same things in starter-kit, time task runner, solves problems you, presents own issues , difficulties during learning usage, , say, more dependencies have, more can go wrong. , reason rid of such tools.