xvoland / gulp-xv-HTML-Template

This Gulp-template script automatically optimise SVG-sprites, converts fonts from TTF/OTF to WOFF/WOFF2, converts from SCSS/SASS to CSS-style, optimize CSS-styles, merges and minifies CSS-styles, merges and minifies JavaScripts. And also, gives the ability to edit in a live browser.

Gulp-xv-HTML-Template

This is a template for typical projects that are generated automatically by the Gulp (Node.js).

This is Gulp-template script automatically:

• using templates in HTML @@include('_filename.html')
• compress HTML
• converts from SCSS/SASS to CSS-style
• optimize CSS-styles
• merges and minifies CSS-styles
• using templates in JavaScript @@include('_filename.js')
• merges and minifies JavaScripts
• optimize SVG-sprites
• create WEBP images and replace <img> tag to <picture> (optional with gulp-xv-webp)
• converts fonts from TTF/OTF to WOFF/WOFF2
• SCSS - @mixin adptFonts() - dynamically changing the font-size for small screens (mobile phones)

and also, gives the ability to edit in a live browser.

Install

Before starting, need to install the packages under console in the root of project

> npm i

Typical file structure

./app
	/fonts
		└── *.ttf or *.otf
	/icons
		└── *.svg
	/images
	/js
	/scss
		└── *.scss
		
	index.html
	
gulpfile.js
package.json

Output project structure:

./(project_folder_name)
	└──/css
			style.css
			style.min.css
		
	└──/fonts
			*.woff
			*.woff2
		
	└──/js
			lazysize.js
			lazysize.min.js
			main.js
			main.min.js
		
	└──/images
	
	index.html
	index.min.html

Functions

To generate sprites from folder ./app/images/

> gulp svgSprite

Add all fonts from folder ./app/fonts/ to ./app/scss/fonts.scss

> gulp fontsCSS

Getting Started

Clone repo:

> git clone https://github.com/xvoland/Gulp-HTML-Template.git

Install Packages:

> npm i

The project has been created. Edit files...

Copy Fonts files to ./app/fonts/

Copy SVG files to ./app/icons/

Generate Sprite image:

> gulp svgSprite

Generate Fonts CSS:

> gulp fontsCSS

Run Gulp:

> gulp

Enjoy editing with Live Update Browser http://localhost:3000

Mixins

adptFonts(<Screen Size>, <Mobile Size>)

Screen Size - default font size for desktop

Mobile Size - target font size for small screens

@include adptFonts(24, 18);

TODO

• create a new/update this template project for PostCSS

Support and Donation

I’ll continue to work and improve the script features regardless of the outcome of funding, because it's rewarding to see that people are using it and it does the job for them. Still I would appreciate your support in covering some of the expenses with the domain hosting and programming hours which are taken from my family time.

Donate any amount for my projects https://paypal.me/xvoland

Copyrights

© 2021, Copyrights Vitalii Tereshchuk at https://dotoca.net