/SCSS-JS-Builder

Primary LanguageCSSMIT LicenseMIT

Build Process Explanation

SCSS Compilation ✅

Input: src/scss/Yohns.scss Output:

  • public/assets/css/style.css (unminified/expanded)
  • public/assets/css/style.min.css (minified/compressed)

JavaScript Compilation ✅

Configuration: src/js/Yohns.js (this file lists which JS files to include) Source Files: The actual JS files listed in Yohns.js Output:

  • public/assets/js/script.js (unminified/readable)
  • public/assets/js/script.min.js (minified/compressed)

How it Works:

Step 1: Configure JS Files

Edit src/js/Yohns.js to list your files:

module.exports = [
	'config.js',
	'utils.js',
	'components/modal.js',
	'main.js'
];

Step 2: Create Your JS Files

Create the actual files in src/js/:

  • src/js/config.js
  • src/js/utils.js
  • src/js/components/modal.js
  • src/js/main.js

Step 3: Build

Run npm run build and the system will:

  1. Read src/js/Yohns.js to get the file list
  2. Find each file in the src/js/ directory
  3. Concatenate them in the specified order
  4. Create both unminified and minified versions

Example Build Output:

🔨 Building JavaScript in expanded mode...
📁 Files to include (in order):
   1. config.js
   2. utils.js
   3. components/modal.js
   4. main.js
✅ JavaScript built successfully: public/assets/js/script.js
📊 Total size: 15.32 KB
📄 Files processed: 4

Important Notes:

  • src/js/Yohns.js is NOT compiled - it's the configuration file
  • Only the files listed in src/js/Yohns.js get compiled
  • Files are concatenated in the exact order specified
  • All JS files must be vanilla JavaScript (no ES6 modules)