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.
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.
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.