Skip to main content
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!');