Get an introduction to build tools and when to use them.

Introduction To Build Tools

Build tools are a part of a larger web development ecosystem, the set of tools used to create web applications and their interactions.

We can divide the process of producing a web app into three stages: development, testing, and deployment. Build tools can assist with all of them! In development, build tools can simplify the way different types of resources can be combined. The process of testing and deployment can be automated by task runners, and the content served in the deployment stage is often produced by bundlers.

A table showing tools in three categories of the web development ecosystem: development, testing, and deployment. The deployment category is further divided into two categories: task runner and bundler.

The Web Development Ecosystem

In this lesson, we got an introduction to what build tools are and when to use them. More specifically, we learned about:
* how build tools fit into the overall web development ecosystem
* differences between task runners and bundlers
* how bundlers use dependency graphs to map out the connection between resources
* the processes bundlers use to improve performance such as code splitting, minification, tree shaking, and dead code elimination.

In the next module, we will walk through how to build a web app using Webpack!

Diagram showing the process of source files being compiled, bundled, tested, and deployed.

Review

A large and complex application can take a long time to download in the browser if not optimized. Build tools utilize processes such as code-splitting, minification, dead-code elimination, and tree-shaking to reduce the size of downloads. 

*Code-splitting* is a technique that allows you to split your code into multiple files or chunks that can be loaded as needed.

*Minification* is a process that removes comments, whitespace, and other unneeded data from your code. References in the code can also be renamed so that the resulting bundle is smaller.

*Dead-code elimination* aims to remove any code not actually used by the finished application.

*Tree-shaking* is a type of dead-code elimination that searches included modules for files and functions that are not used.

Build tools use combinations of these strategies to help streamline your web applications!

A diagram that shows the effects of code splitting, minification, and dead-code elimination to improve performance.

Improving Performance

As you create more complex web apps, performance becomes very important. You'll need to configure apps to work in different browsers or with a low internet speed. It's not easy to do this by hand, but *build tools* help automate this!

There are several types of build tools:

* _Package Managers_, such as [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/), are used to install and manage Node.js packages.
* _Bundlers_ are used to efficiently bundle assets such as JavaScript files, images, and fonts. A few examples of the more commonly used bundlers are [Webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/), [Parcel](https://parceljs.org/), and [Vite](https://vitejs.dev/). 
* _Task runners_, such as [Grunt](https://gruntjs.com/) and [Gulp](https://gulpjs.com/), are used to automate the process of running repetitive workflows.

Build tools can assist you with:

* Combining JavaScript modules and CSS into bundled files for production.
* Minifying files for improved performance.
* Running unit tests with one command.
* Automatically previewing changes to your application.

You could be already using build tools and might not even realize it! Many popular frameworks and libraries utilize build tools to automate processes. For example, [`create-react-app`](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) and [Gatsby](https://www.gatsbyjs.com/get-started/) utilize build tools to automate aspects of their development and deployment processes.

In this lesson, we will learn about the key concepts of build tools. Let's get started!

A cartoon showing a developer overwhelmed with the number of files for a web project. A colleague suggests that they use a build tool and the developer is happy with organized and efficient code.

What are Build Tools?

The connections between assets need to be mapped by the bundler to produce an output containing everything the app needs. This process uses a data structure called a *dependency graph*. 

A dependency graph is a type of data structure formed by a [directed graph](https://en.wikipedia.org/wiki/Directed_graph) representing the relationship between different files. When one file depends on another, a connection is added to the graph. Once all the connections are added, the bundler knows exactly what it must incorporate into the build.

Take a look at the representation of a dependency graph on the right. **index.js** depends on two files: **style.css** and **user.js**. **style.css** also has a dependency for a font file, **font.woff**. **user.js** depends on another JavaScript file, **util.js**, and two image assets, **banner.png** and **profile.png**.

Diagram showing a dependency graph of JavaScript files.

Dependency Graphs

Let's focus on two types of build tools, task runners and bundlers.

Task runners automate certain development processes, such as compiling code from SCSS to CSS or Typescript to JavaScript. Commonly used task runners for JavaScript are [Grunt](https://gruntjs.com/) and [gulp.js](https://gulpjs.com/).

Bundlers package JavaScript files and other assets such as stylesheets, images, and fonts into bundled files. Bundlers remove unused and duplicated code, improving download speed. Commonly used bundlers include [Webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/), [Parcel](https://parceljs.org/), and [Vite](https://vitejs.dev/). 

Many applications can get away with using simple task runners. However, complex applications that use a lot of assets may need both automation and bundling. In a later lesson, we will use [Webpack](https://webpack.js.org/) to go over common processes of building apps of varying sizes.

Diagram showing the difference between task runners and bundlers.