The Build Pipeline

The objective of Squeditor Framework is to allow advanced programmatic development using PHP and SCSS while ultimately delivering purely static, flat index.html deliverables.

The Compilation Commands

You interact primarily through standard npm execution scripts running in your terminal:

> Terminal

# 1. Build only the CSS and JS bundles
npm run build:css

# 2. Crawl the PHP server and export flat HTML
npm run build:snap

# 3. Zip the output and conditionally deploy a preview URL
npm run build:zip

# Complete full production build step automatically (runs all 3 above)
npm run build

Pipeline Architecture Breakdown

When you run npm run build, three discrete tools run consecutively:

1. UIKit Components Bundler (`build-components.js`)

It reads your squeditor.config.js, evaluates the components[] array, and cherry-picks the exact JS and CSS files out of node_modules/ to create uikit-components.css and uikit-components.js.

2. Vite SCSS/Tailwind Processor

Vite intercepts the CSS pipeline. It transpiles your SCSS architecture into pure CSS and executes Tailwind plugins via PostCSS based on your tailwind.config.js.

3. The Snapshot Crawler (`snapshot.js`)

The snapshot crawler boots up a temporary local PHP server, visits every URL listed in your configuration, rewrites internal links, and saves flat .html files into the dist/ folder.

Modular Scripting Core

To make the framework “Developer Friendly,” the build system is powered by a modular utility layer in squeditor-framework/scripts/utils/:

core.js: Centralized configuration loading and common helpers (findPrettier, safeMkdir, stripDevContent).
cli-ui.js: A standardized UI library for premium terminal output with progress bars, headers, and icons.

Extending the Pipeline

You can easily add your own scripts to the pipeline. Inherit the core logic by importing the shared utilities:

const { projectRoot, config } = require('./utils/core');
const ui = require('./utils/cli-ui');

ui.header('Custom Task');
ui.step('Analyzing something special...', 'star');
// Your logic...
ui.success('Done!');

Getting started

Architecture & Templating

Styling & Theming

GSAP Animations

Other

The Compilation Commands

Pipeline Architecture Breakdown

1. UIKit Components Bundler (`build-components.js`)

2. Vite SCSS/Tailwind Processor

3. The Snapshot Crawler (`snapshot.js`)

Modular Scripting Core

Extending the Pipeline

​The Compilation Commands

​Pipeline Architecture Breakdown

​1. UIKit Components Bundler (build-components.js)

​2. Vite SCSS/Tailwind Processor

​3. The Snapshot Crawler (snapshot.js)

​Modular Scripting Core

​Extending the Pipeline

The Compilation Commands

Pipeline Architecture Breakdown

1. UIKit Components Bundler (`build-components.js`)

2. Vite SCSS/Tailwind Processor

3. The Snapshot Crawler (`snapshot.js`)

Modular Scripting Core

Extending the Pipeline