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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay