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 and gulp.js.
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, esbuild, Parcel, and Vite.
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 to go over common processes of building apps of varying sizes.
Instructions
Here are some questions to test your understanding! Think of your answer first, then click on the “Check Answer” button to check your answer.
What is a bundler?
Check Answer
A bundler is a tool used for packaging JavaScript files and other assets such as stylesheets, images, and fonts into bundled files.
What are the key differences between task runners and bundlers?
Check Answer
Task runners are used to automate certain processes of development. Bundlers are used to package files into bundles.