🚨 With newer HTTP 2/3 a few of things being discussed below are outdated. But the usage of build tool can’t still be ruled out.

Why build tools❓

Often times we love ♥️ to keep all our files separate and tidy. For example, consider a simple HTML project. We will have separate files for JS, styles and HTML. As the project grows and with more pages getting added, the file sizes and their number may also increase. Keeping files separate, maintenance is a lot easier. In case of a bug, it is easier to track and patch. In short, development becomes hassle-free😎.

But what about production?🤔 In prod, the story is different, as we can't afford too many files. For each file, we need to make a separate HTTP call and that can be quite expensive. So in production, it is better to keep the file count as minimum as possible.

One way is to combine these files. We can combine all our JS, CSS and HTML code into individual files. If we start doing it manually, it can be really cumbersome and tedious😫. We may easily lose the track too. This is where we can rely upon a set of tools termed build-tools🧰.

What are build tools❔

As the name indicates, build-tools are tools, that help us in creating builds. Builds are production-ready executables of our project. Build tools, help us do more than concatenating our files.

We can use it for ♦️file compression, ♦️removal of white spaces and unwanted codes, ♦️linking of files and much more. If we can think of all these operations as individual tasks, build-tools are helping us to automate them. Run a single command and build tools will do its magic✨.

There are a lot of build tools out there and each serves different use cases. To name a few, 👉 Grunt, 👉 Gulp, 👉
parcel.js and 👉 Webpack. Some of them are easy to use, but a few require a steep learning curve. So it is better to learn a tool, only if it is required.

For small projects, one might not require a build tool at all. But if your project is quite big and complex it is wise to use a build tool.