Build Tools

In front-end development, there are many types and varieties of build tools that help create modern websites and web applications. Build tools are used for installing, bundling, compiling, transpiling, minifying, templating, and packaging. There are also tools for running tasks and creating full development servers.

With so many tasks required for development, no one tool can handle it all. And with the fast-paced nature of web development, tools can quickly fall in and out of style.

The following is a breakdown of the different categories of available build tools.

Package Managers

As the name suggests, Package managers are used to installing and managing packages. Packages are small bits of the code or libraries that can be incorporated into your website or application.

One of the most common package managers for front-end development is npm, Node Package Manager. The npm build tool can be used to install libraries and frameworks like React, Vue, Bootstrap, or Tailwind. An alternative to npm is yarn, and for back-end development with PHP, there is composer.

Bundlers

Bundlers are used to combine multiple JavaScript files into a single file that can be run in the browser. Such tools give developers the best of both worlds. The flexibility of modularizing JavaScript code while still having the efficiency of a single file when it is time to move to production.

Bundlers can accomplish this feat by matching all the import and require statements, which indicate which packages or libraries to include, adding them all to a big JavaScript file to make the code function.

By far the most popular bundler is Webpack. But other bundlers include Parcel, Browserify and esbuild.

Task Runners

Task runners, like Grunt or Gulp, automatically execute processes and perform repetitive but straightforward tasks saving time and work for developers. Task runners are also, by nature, general-purpose. For example, they can be used to trigger the transpiling of JavaScript or the running of a preprocessor to output CSS. However, these tasks are stored inside a script created and maintained by the developer. While this provides the developer with a lot of flexibility, it can lead to large, unmanageable scripts, especially for novice developers. For this reason, task runners have fallen out of style in favour of the more opinionated and structured options.

Frontend Tooling

While bundlers and task runners are tools designed to make life easier for developers, they come at a cost. They often have a large learning curve and significant set up times. Fortunately, there are another category of build tools commonly referred to as frontend tooling.

This category of tools saves time and frustration by handling the configuration and implementation of installers, bundlers, and minifiers automatically. While it means developers have less flexibility to customize, the trade off is having a full development environment in mere minutes.

Some frontend tooling tools are tied explicitly to a framework, like create-react-app for React and Vue CLI for Vue, while others are framework agnostic like Vite. In addition to the pre-configuration of the bundlers and compilers, most frontend tooling tools includes scaffold templates providing developers with starter code and a fully functional development server with live refresh.