webpp v1.6.0

webpp

A lightweight preprocessor for web projects

Features

• Auto compiling .sass, .scss
• Use TypeScript
• Add npm modules, frameworks and stylesheets to your page with a simple syntax
• Bundle all your files into one stylesheet, script and html file
• Don't ever worry about waiting for the DOM to load again
• Use babel to transpile your code
• Use browserify to bundle your code
• Don't link your stylesheets and scripts to your html, they are already included
• Use components in your HTML
• Bundle your inline stylesheets and scripts into a single file
• Use react like reactivity
• Use @event in your HTML to listen to events
• Caching System for super speed builds
• Super fast dev builds & slow, but ultra compatible production builds
• Live Reloading in Dev Mode
• Embedd Google Fonts easier

Why webpp?

I created webpp because I wanted:

• Components to be used in my HTML
• That normal HTML is valid in webpp
• To use SASS
• To only write the body of the HTML
• To bundle all my inline code into one file
• To use frameworks without having to include them in every html file
• To use event listeners in my HTML instead of defining them in the JS
• To create static websites
• Super fast dev builds (maximum of 500ms)

Project Structure

The project structure is like a normal web project, but instead of having a html file you have an .webpp folder.

For example: In vanilla:

my-cool-website/
├── index.html
├── stylesheet1.css
├── script1.js
├── about.html
├── about.css

In webpp:

my-cool-website/
├── index.webpp/
│   ├── .yaml
│   ├── index.html
│   ├── style.css
│   ├── script.js
├── about.webpp/
│   ├── .yaml
│   ├── index.html
│   ├── style.css