DEV Community

Cover image for Build tools (purely front end)
Shihabudheen US
Shihabudheen US

Posted on • Edited on

3 1

Build tools (purely front end)

🚨 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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay