OptimizedHTML 5

Lightweight production-ready Gulp starter.

OptimizedHTML 5 - lightweight startup environment with Gulp 4, Preprocessors (Sass, Scss, Less, Stylus), cssnano, Browsersync, PostCSS, Autoprefixer, webpack-stream, Babel, Rsync, CSS Reboot (Bootstrap reboot), Server-side HTML imports (SSI), build, gulp-imagemin. It uses best practices of images compression, JavaScript, CSS optimizing and contains a .htaccess code for resources caching (images, fonts, HTML, CSS, JS and other content types).

How to use OptimizedHTML 5

Clone into the current folder and remove all unnecessary (one command):

git clone https://github.com/agragregra/oh5 .; rm -rf trunk .gitignore readme.md .git dist .editorconfig

1. Clone or Download OptimizedHTML 5 from GitHub
2. Install Node Modules: npm i
3. Run: gulp

Main Gulpfile.js options:

• preprocessor: Optional preprocessor (sass, less, styl). 'sass' also work with the Scss syntax in "styles/sass/blocks/" import folder
• fileswatch: List of files extensions for watching & hard reload

Main Gulp tasks:

• gulp: run default gulp task (scripts, images, styles, browsersync, startwatch)
• scripts, styles, images, assets: build assets (css, js, images or all)
• deploy: project deployment via RSYNC
• build: project build

Basic rules

src's & dist's:

1. All src | dist scripts located in app/js/app.js | app.min.js
2. Main Sass|Less|Styl src files located in app/styles/{preprocessor}/main.*
3. All compressed styles located in app/css/main.min.css
4. Project styles config placed in app/styles/{preprocessor}/_config.*
5. All src images placed in app/images/src/ folder
6. All compressed images placed in app/images/dist/ folder

Include parts of HTML code:

Include parts of html code is implemented using SSI Browsersync server side. You can import any part of the code using construction in any of html files:

<!--#include virtual="/parts/header.html" -->

Variables? No problem:

<!--#set var="title" value="OptimizedHTML 5" -->
<!--#include virtual="/parts/header.html" -->

In "/parts/header.html":

<title><!--#echo var="title" --></title>

Include parts of Preprocessor code:

All included parts of preprocessor files placed in the folder "styles/{preprocessor}/blocks/". Any number of preprocessor files can be placed here and in any order. They will be automatically included in the "styles/{preprocessor}/main.*" file and processed by the selected preprocessor.

Included features

1. bootstrap-reboot - Bootstrap Reboot CSS collection
2. _breakpoints.scss - Bootstrap Breakpoints mixin (available only for sass and scss)
3. bootstrap-grid (optional) - Bootstrap Grid collection

Helpers

Fonts

The woff2 fonts are currently recommended.

Converter recommended: https://www.fontsquirrel.com/tools/webfont-generator
Or get from google-webfonts-helper: https://google-webfonts-helper.herokuapp.com/fonts

font-weight helper

• 100 - Thin (Hairline)
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Regular (Normal)
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

Caching

Create or open .htaccess file in root folder of website (Apache). Place this code for resources caching:

<ifModule mod_expires.c>

# Add correct content-type for fonts & SVG
AddType application/font-woff2 .woff2
AddType image/svg+xml .svg

ExpiresActive On
ExpiresDefault "access plus 5 seconds"

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache Fonts
ExpiresByType application/font-woff2 "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache other content types (CSS, JS, HTML, XML)
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

</ifModule>

<ifModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript application/font-woff2 image/svg+xml

</ifModule>

Issues

1. Long Preprocessor compile: Disable the "safe write" option in PHPStorm/WebStorm settings.