Lightweight production-ready Gulp starter.
OptimizedHTML-MY - 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).
Clone into the current folder and remove all unnecessary (one command):
- Clone or Download OptimizedHTML-MY from GitHub
- Install Node Modules: npm i
- Run: gulp
- 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
- 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
- All src | dist scripts located in app/js/app.js | app.min.js
- Main Sass|Less|Styl src files located in app/styles/{preprocessor}/main.*
- All compressed styles located in app/css/main.min.css
- Project styles config placed in app/styles/{preprocessor}/\_config.*
- All src images placed in app/images/src/ folder
- All compressed images placed in app/images/dist/ folder
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:
Variables? No problem:
In "/parts/header.html":
<title></title>
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.
- bootstrap-reboot - Bootstrap Reboot CSS collection
- \_breakpoints.scss - Bootstrap Breakpoints mixin (available only for sass and scss)
- bootstrap-grid (optional) - Bootstrap Grid collection
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
- 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)
Create or open .htaccess file in root folder of website (Apache). Place this code for resources caching:
# 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" 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
- Long Preprocessor compile: Disable the "safe write" option in PHPStorm/WebStorm settings.