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

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.

Example

How to develop, publish and use a javascript library ?

Documentation / Reference





Discover More
Code Splitting

Code splitting is an operation performed by a bundler that splits code into chunks. You can then load only what is needed for a page to render. It's also known as route-chunking (where route refers to...
Welcome From Browser
How to develop, publish and use a javascript library ?

A step by step tutorial on how to create and publish a javascript library
Javascript - Library

library in Javascript. A library is a distribution format as a package that is created from a module bundle from a prototype The difference between a package and a library is that the modules are...
Javascript - Linter / Minification (EsLint / Tern / Uglify)

This page is linter / minification in Javascript Linter are used under the hood by bundler in the optimization phase. Name Language Description eslint/eslintESLint Javascript A linter (identifying...
Javascript - Module

functionality in Javascript. A module is different from a script file because: it defines a well-scoped object that does not pollute the global namespace. It list explicitly its dependencies Javascript...
Javascript - MonoRepo

in the Javascript context When starting with monorepo, integrate first the leaf projects of the dependency graph (ie project without dependency). To use the library locally without publishing to...
Javascript - Resolver

Resolver are function that: takes a dependency specifier (ie import or require) as input and returns a full file path They are used by all tools that needs to build a dependency graph such as a...
Javascript - Rush (MonoRepo manager)

rush is a bundler that is specialized for a monorepo.
Vscode Source Map Pb
Javascript - Source Map (Map File)

A source map provides a mapping between the original and the build source code. The bundler that combined/minified the source code creates the source map debug session The location coordinates are by...
Javascript - Toolchain (Build tools)

This page is building/shipping in the context of Javascript A JavaScript build toolchain typically consists of: A package manager to install and update package such as yarn, npm. A bundler (such...



Share this page:
Follow us:
Task Runner