Web - Build Operations / Build Pipeline


This page is about the build operation for the web.

A build pipeline

The pipeline:


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.


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.


  • 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


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.



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

See the list at bundler 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.


Documentation / Reference

Powered by ComboStrap