What is the role of build systems in front-end development - Day 13 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

With JavaScript frameworks becoming more and more complicate, and with the increasing demand for performances also on the client-side of applications, gone are the days when it was just enough to put some javascript or css files in a static folder. Today, 13 days into the advent calendar of my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap", I'm going to share an extract of chapter 6, which introduces the role build systems in front-end development.

What Front-End Build Systems are for

In the context of server-side compiled languages, build systems are
used to compile code into binaries, to run tests, to compute metrics,
and to perform transformations of configuration files from development
to a production setup. Other typical operations include moving files
around and creating release files. Front-end build systems are also
used for more or less the same reasons as server-side build systems
because even front-end development requires "compiling" code files
into "binaries" (for example Less or Sass to CSS or TypeScript to
JavaScript) or running JavaScript test suites or metrics (JSLint for
example). However, front-end development also requires some tasks that
are specific to JavaScript and CSS development and that are used
during the development phase and not just during the final release.
One such task is automatically including references to Bower files.
Another example is minification and concatenation of JavaScript and
CSS files to reduce the size and number of files downloaded by the
client.

The rest of the chapter explains how to perform some of the most
common tasks. It will show how to:

Automatically include references to Bower packages

Compile Sass files to CSS

Compile TypeScript to JavaScript

Combine and minify JavaScript and CSS files

Run JSLint to detect JavaScript problems

Perform tasks and automatically reload the browser when changes are detected in a file

The tool used to show how to perform these tasks is Gulp, since it is
the tool the .NET community is mostly leaning toward. Later in the
chapter there is also a quick introduction to webpack, which was
already briefly mentioned in Chapter 3 since it is used by the Angular
Command Line tool and is gaining a lot of traction in the front-end
development community.