Web - Build Operations / Build Pipeline

About

This page is about the build operation for the web.

A build pipeline

The pipeline:

Process

The below flow shows you a typic build pipeline.

graph LR Entries("Entries (ML/CSS/JS)") -->MarkupOrigin("Markup (ML)") Entries -->JsOrigin Entries -->JsxOrigin Entries -->TsOrigin Entries -->CssOrigin Entries -->ImageOrigin subgraph "Transformer (Transpiler/Compiler)" JsxOrigin(JSX) -- Babel ---> JsTrans MarkupOrigin --> HtmlTrans(HTML) TsOrigin(TS) -- Typescript --> JsTrans JsOrigin("JS (Node/Es)") -- Babel --> JsTrans(JS) CssOrigin(Css/Less/Sass) --> CssTrans(CSS) ImageOrigin(Image) -- "Format/Size" --> ImageTrans(Image) end subgraph Packagers JsTrans --> JsPackage(JS Package) CssTrans --> CssPackage(CSS Package) end subgraph "Optimizers (Linter/Minifier/Validation)" JsPackage--> JsOptimizer("Js Optimized") CssPackage --> CssOptimizer("Css Optimized") HtmlTrans --HTMLNano--> HtmlOptimizer("HTML Optimized") ImageTrans --"Delete Meta, ..."--> ImageOptimizer("Image Optimized") end subgraph "LiveReload" HtmlOptimizer --> HtmlLiveReload["Live Reload"] end JsOptimizer--> Output(App/Library/Source Map) CssOptimizer-->Output ImageOptimizer-->Output HtmlLiveReload-->Output

Transformer (Compiler)

Packager / Concatenation

concatenation means simply merging multiple files together, i.e. copying and pasting several files into one.

The reason is that it’s more efficient to fetch one file, rather than lots of small files.

Optimizer

Linter / Quality

Minification / Compression

The term minification or compression in the context of CSS, Javascript means removing all unnecessary characters, such as spaces, new lines, comments without affecting the functionality of the source code.

Minification is the process of taking a file and making the overall number of characters less, without changing how the code works. The goal is to make the file size smaller.

Example:

  • removing comments,
  • taking a long variable name and making it smaller.

Image optimization

Meta data is removed from the image as it’s not needed by the browser to display the image

Example: information about the camera used to take the photo.

Live Reload

Live reload reloads your page automatically while updating your code. See Web - (Hot|Live) (Edit|Reload) - Auto File Sync

Tools

The below listed tools are node orchestrator tools that permits to create a build pipeline.

  • You may also find similar tool in other language
  • They are installed as dev dependencies.

Bundler

bundler:

  • are working on a entry file
  • build the dependency tree
  • and performs the build operations

List:

Task Runner

Task runner/orchestrator such as Gulp and Grunt can also perform most of the bundle operation through plugin.

They have also tasks for bundler.

Why ? because they don't get their files from dependency graph but from the file system and therefore generally don't support directly dependency graph task such as:

Monorepo framework

All monorepo framework because they wraps a bundler.

Example

Documentation / Reference


Powered by ComboStrap