OptimizedHTML TW

Lightweight production-ready Gulp starter with Tailwind CSS.

OptimizedHTML TW - lightweight startup environment with Gulp, Preprocessors (Sass, Scss, CSS, HTML file-include with options), cssnano, Browsersync, PostCSS, Autoprefixer, webpack-stream, Babel, Rsync, build, gulp-imagemin and Tailwind. 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 TW

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

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

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

Main Gulpfile.js options:

• 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, posthtml: build assets (html, css, js, images or all)
• deploy: project deployment via RSYNC
• build: project build

Basic rules

src's & dist's:

1. HTML source files and components located in app/html | app/html/parts
2. All src | dist scripts located in app/js/app.js | app.min.js
3. Main Sass src file located in app/styles/main.sass
4. All compressed styles located in app/css/main.min.css
5. Project styles config placed in app/styles/_config.sass
6. All src images placed in app/img/src/ folder
7. All compressed images placed in app/img/dist/ folder

Include parts of Preprocessor code:

All included parts of preprocessor files (Sass, Scss, CSS) placed in the folder "app/styles/blocks/". Any number of preprocessor files can be placed here and in any order. They will be automatically included in the "app/styles/main.sass" file and processed.

Include parts of HTML components:

All HTML files src placed in the folder "app/html/*". Included components located in "app/html/parts/".

Features

Tailwind

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.