Click to stop Intro
Lars Urban presents
Landing Page Compiler
Easy LP Programming!

Description of Landing Page Compiler

The "landing page compiler" is designed to easily programm landing pages or small websites. With Gulp, nodeJS you generate your programmed page and create a fully inline code in just one file. The pure SEO is working perfekt on this site and makes it slim, fast and efficient.

This small compiler is not build for big and complex websites, which will exceed the functionality. I kept the system simple and fast, for efficient and direct programming of landing-pages.

You need to have knowledge about SCSS, PUG, and using the terminal to use the Gulp- and node-commands for easy and fast programming.

It is possible to include JS files, which will also be implemented inline together with CSS in the final HTML code. To keep it fast, it is possible to include Base64 fonts and keep the amount of all uneccessary external links as small as possible.

arrow down 2

Libraries and toolkits LPC uses

Click on one of the icons to find out more about each topic. You can also find learning material if neccessary and not already known.

pug logo
sass logo
gulp logo
nodejs logo
arrow down 3
arrow down 4

Features of Landing Page Compiler

PUG Files

For easy programming this compiler uses PUG files

SCSS

This landing page compiler uses SCSS stylesheets to enable functions and variables for layouting

Gulp

With the gulpfile.js it is possible to create new projects, watch and compile PUG files as well as SCSS files

nodeJS

To export your projects this compiler uses nodeJS to create inline HTML files with all style and js included

Templates

Use your own templates to use them for new projects

Commands to control the Landing Page Compiler

Getting Started with

npm install

To ensure that you have all neccessary tools

Gulp Commands

gulp new --project test1

Create new Project with _default template. You need to be in the "_projects" directory

gulp new --project test1 --template xyz

Create new Project with defined template (name of folder) from "templates" directory

gulp watch

Compiling your files into the "_dist" folder and watch "index.html" life in browser

gulp watch --file xyz.html

Compiling all files from project into the "_dist" directory and watch specified "xyz.html"
xyz.html --> full path of html file required

nodeJS Commands

node bakery.js --project test1

Export desired project and create inline HTML code including all CSS code, JS code and images in a timestamped "_export" directory.
Copy the complete path of project directory "lp-compiler" (for example)

PUG files

I've created the "index.pug", which will be compiled into "index.html". You can add an individual PUG file (f.e. "test.pug") in the same folder as "index.pug" and it will be compiled into "test.html".

The folder "_shared" includes the menu and footer pug-file, which can be included in your individual PUG files and you only need to change the menu once, as it is implemented in all parent files.

SCSS files

I only have one SCSS file, which is included in the pug-file. You can feel free to add more SCSS files, maybe in a separate folder, and import them into your "style.scss". Then it will be included automatically inline in your exported HTML file.