Gulp vs Webpack

Currently gulp offers a selection of 1000+ plugins and it is growing rapidly.

This depends on your style, but gulp is closer to the code, the actual execution isn't hidden by multiple layers and it's much easier to customize the build system without writing bloated modules. This also brings rather small configuration files.

Any task can be set to have other tasks as dependencies. The dependencies are specified through piping streams, and tasks run concurrently if they do not block in dependencies.

Since Gulp just uses streams at its core, you don't actually need a plugin wrapper to use a project that uses streams. If you use this approach, the you don't even have to worry about plugin maintenance at all, and get the bleeding edge updates as soon as they come out even if the plugin hasn't been updated. It also means if a project happens to not have a plugin, you don't need to write a new one, you can just use it as is.

In gulp, it's easy to pipe multiple steps together which you commonly need with build systems. For example, you may need to compile the javascript source files, then package them together, and then minify it. The streaming system makes this much easier.

Additionally, it improves performance since all operations are done in memory (compared to I/O operations) and avoids the need of unnecessarily compiling files (compared to Grunt that has to compile all files even if just one has changed).

In Gulp, the transforms are performed through chains which makes it easier to understand the order of operations, and easier to modify it.

Because streams in Gulp use pipes to establish dependency order, they are parallel by default without having to rely on plugins or hacks.

Because Gulp is built using streams, it can store intermediate transformations in memory and defer writing to disk until the very end. This improves performance by not requiring expensive blocking disk operations for task dependencies.

Gulp's configuration file is actually very readable because it's actual JavaScript instead of a large file of JSON objects. The entry barrier is very low for developers who have never used a task runner before and it's API is very simple, with only 4 methods.

Because Gulp is built on top of the streaming API, you don't actually need gulp to use them. This could be helpful if you want to re-use those modules outside of gulp, possibly for testing, and using the same modules would be more consistent.

Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building.

Using Webpack opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly.

Webpack allows you to split your codebase into multiple chunks. Chunks are loaded on demand. This reduces the initial loading time.

Source maps allow for easier debugging, because they allow you to find the problems within the origin files instead of the output file.

Webpack supports ES6 modules and their import and export methods without having to compile them to CommonJS require

Because Webpack allows you to use the same require() function as node.js, you can easily share modules between the client-side and server-side.

Webpack supports AMD and CommonJS module styles. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries.

Webpack supports using all three module types, even in the same file.