Development

Rasuke is developed with Vite, Nunjucks, and SCSS. There is no Gulp pipeline, no gulp-file-include, and no Bootstrap build step. Node.js 18 or newer is required ("engines": { "node": ">=18" }).

Quick Start

Download and install Node.js (version 18 or later).
Open a terminal in the rasuke-html-dev folder.
Install dependencies and start the kit:

cd rasuke-html-dev
npm install
npm run tokens
npm run dev

When the command finishes, the site opens at http://localhost:3000 (LAN is enabled, server.host: true). Vite serves every file in src/pages/*.html as a multipage entry; pretty URLs are mapped by the norio-page-routes plugin kept in vite.config.js (/ → index.html, /about.html → src/pages/about.html).

Commands

Command	Description
`npm run tokens`	Compile `tokens/tokens.json` into `src/assets/scss/abstracts/_tokens.generated.scss`. Runs automatically before `dev` and `build` (`predev` / `prebuild`).
`npm run dev`	Start the Vite development server (port 3000).
`npm run build`	Production build into `dist/` — flat HTML plus bundled (minified) assets.
`npm run build:html`	ThemeForest classic package into `dist-html/`: runs tokens + `vendors:tf` first, builds with `--mode html` (readable, unminified CSS/JS, beautified HTML), then `scripts/build-html-js.mjs` writes classic IIFE bundles so pages open over `file://`.
`npm run vendors:tf`	`scripts/sync-tf-vendors.mjs` — sync the classic vendor stack into `public/assets/js/vendors/`.
`npm run build:wp`	Sync vendors, then `scripts/build-wp-runtime.mjs` — prepare the runtime used by the WordPress FSE port.
`npm run preview`	Preview the compiled `dist/` folder locally (port 4173).
`npm run lint:fse`	Markup and SCSS guard (`scripts/check-fse-ready.mjs`). Add `-- --strict` to fail on warnings.

How the kit works

Pages in src/pages/ only extend the layout and include sections. Vite writes each one to dist/{name}.html (flat, via the flattenHtmlOutput plugin).
Nunjucks resolves includes from src/. Every src/data/*.json file is exposed as a global named after the file (site.json → {{ site }}, hero1.json → {{ hero1 }}). Image paths in JSON are inlined as base64 during development so WebGL / canvas sampling never hits a path problem.
SCSS enters through src/assets/js/main.js (the layout links /src/assets/scss/main.scss in dev). Values come from CSS custom properties, not hex or px (except 1px / 2px hairlines).
Never edit _tokens.generated.scss. Change tokens/tokens.json and recompile.
Editing any .njk, page .html, or data .json file triggers a full reload in dev.

Dependencies

{
  "name": "rasuke-html-dev",
  "version": "1.0.0",
  "description": "Rasuke master HTML starter — Vite + Nunjucks + SCSS, no CSS framework",
  "private": true,
  "type": "module",
  "scripts": {
    "tokens": "node scripts/build-tokens.mjs",
    "predev": "npm run tokens",
    "dev": "vite",
    "prebuild": "npm run tokens",
    "build": "vite build",
    "vendors:tf": "node scripts/sync-tf-vendors.mjs",
    "prebuild:html": "npm run tokens && npm run vendors:tf",
    "build:html": "vite build --mode html && node scripts/build-html-js.mjs",
    "build:wp": "node scripts/sync-tf-vendors.mjs && node scripts/build-wp-runtime.mjs",
    "preview": "vite preview",
    "lint:fse": "node scripts/check-fse-ready.mjs"
  },
  "devDependencies": {
    "esbuild": "^0.28.2",
    "js-beautify": "^2.0.3",
    "nunjucks": "^3.2.4",
    "sass": "^1.85.0",
    "sharp": "^0.35.3",
    "vite": "^6.2.0"
  },
  "engines": { "node": ">=18" },
  "dependencies": {
    "glightbox": "^3.3.1",
    "gsap": "^3.15.0",
    "three": "^0.184.0"
  }
}

Note: buyers who only need to edit copy or images can work in the compiled HTML package. Developers who want to add pages, restyle tokens, or keep the section architecture should work in rasuke-html-dev and run npm run build (or npm run build:html for the ThemeForest flat package) again. For how to preview the compiled template locally (HTTP server vs file:// / Chrome), see Local Preview.