Webpack vs Gulp
With the rising popularity of Webpack, more and more people started to compare it with Gulp. Soon, fierce discussions which is better began to populate comment sections of web development websites.
In this blog entry, we'll take a closer look at the Gulp vs Webpack battle and show you what Webpack is, how it differs from Gulp, and – most importantly – which one you should use.
Introduction
Image loading...The evolution of Homo Frontendalis. Source: blog.qmo.io
In the past couple of years, a lot has changed in the web development industry, with new tools continually displacing old solutions. This happened, for example, to CodeKIT, a GUI-based tool for compiling and minifying tools and assets eventually replaced by Grunt. Then Gulp appeared, and immediately won the hearts of web developers with its intuitiveness and power.
Now, Webpack is on the tide. Will it completely replace Gulp? Opinions are divided, but the trend is very strong:
Image loading...Grunt (red), Gulp (blue) and Webpack (yellow) in Google Trends
What is this Webpack anyway?
Following the offical Webpack website:
The whole idea is very well represented by the infographic below:
Image loading...What is Webpack. Source: webpack.github.io
Here are some resources that will help you kick off:
- Getting started with Webpack: webpack.js.org/guides/getting-started/
- Official Webpack documentation: webpack.js.org/
Gulp vs Webpack
#1: Gulp is a task runner
In short, a task runner is an application that lets you automate repeatable activities. The tasks are defined in a .js
file and executed with a command containing the name of the task. You can, for example:
- run tests and merge files
- compile Sass
- minify CSS/HTML
- bundle/uglify JS
First, you define the tasks. The process is very easy:
gulp.task('test:unit', () => { /* Run unit tests */});
gulp.task('test:e2e', () => { /* Run selenium tests */});
gulp.task('test', ['test:unit', 'test:e2e']);
gulp.task('build:sass', () => { /* Compile Sass */ });
Then you can run all tasks with a single command:
$ gulp test
$
or individually:
$ gulp build:sass
$
#2: Webpack is NOT a task runner
The second difference between Gulp and Webpack: contrary to Gulp, Webpack is a module bundler. Its main purpose is to generate static assets from the application modules and dependencies.
Let's assume we have an application that consists of 2 .js
files and one .css
file. This is what the files look like:
first.js
require("!style-loader!css-loader!./style.css"); document.write(require("./second.js"));
second.js
module.exports = "Hello world!";
style.css
body { background: yellow; }
Let's use Webpack to merge them into one file. First, install the bundler and CSS loaders:
$ npm install webpack -g
$ npm install css-loader style-loader
Now, run the command:
$ webpack ./first.js target.js
The result will be target.js
, a bundled .js
file with our application.
Using Webpack with package.json scripts
Okay, so we know that Webpack is not a task runner. Does that mean you have to use Gulp/Grunt to handle your tasks? Not at all.
All you need to do is define your tasks in the scripts section of your package.json
file:
{
"scripts": {
"build": "node build.js"
}
}
You can use npm or Yarn as a task runner:
$ yarn run build
Webpack vs Gulp - and the winner is...
With both tools you can handle practically every type of workflow. In terms of usability, Gulp is the winner here: it's much easier to define and execute your tasks. On the other hand, Webpack's configuration options are much more flexible + it's developing very fast and has a community growing in size with every day.
It's hard to indicate a clear winner here: it all depends on the profile of your work and the preferences of your team. The truth, as always, is prozaic.
Summary: Using Webpack and Gulp
This article was inspired by one of the articles on CSS Tricks, specifically the discussion in the comments section.
Some people fell in love with Webpack, claiming they don't need Gulp anymore. Some people praised the simplicity of Gulp and complained Webpack is overengineered. As one person put it: "Things need to be practical, seat-of-your-pants, and forgiving".
In Buddy we think there's no correct answer to that argument: we do recommend Webpack as a bundling tool, but that doesn't mean you have to give up Gulp entirely if you start using it. After all, the ultimate aim of both applications is to help you deliver better, faster websites.
Image loading...Gulp and Webpack in one delivery pipeline in Buddy
As you can see, our delivery workflow contains both Gulp and Webpack actions. In the end, what you're going to use in the end is entirely up to you.
Keep calm and <code>
on!
Jarek Dylewski
Customer Support
A journalist and an SEO specialist trying to find himself in the unforgiving world of coders. Gamer, a non-fiction literature fan and obsessive carnivore. Jarek uses his talents to convert the programming lingo into a cohesive and approachable narration.