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.

Tomorrow I'll give a quick introduction to webpack, so come back for more.

If you are liking this series of posts, please consider pre-ordering my upcoming book "Front-end Development with ASP.NET Core, Angular, and Bootstrap", from which all these extracts are taken, and cover all of these topics more in details.