Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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.
https://github.com/xvoland/gulp-xv-html-template

gulp gulp-starter gulpfile gulpjs nodejs npm npm-scripts

Last synced: 6 days ago
JSON representation

Host: GitHub
URL: https://github.com/xvoland/gulp-xv-html-template
Owner: xvoland
License: mit
Created: 2021-05-24T10:06:37.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2021-12-24T20:31:50.000Z (about 3 years ago)
Last Synced: 2024-04-14T05:44:06.055Z (10 months ago)
Topics: gulp, gulp-starter, gulpfile, gulpjs, nodejs, npm, npm-scripts
Language: JavaScript
Homepage:
Size: 63.5 KB
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

# Gulp-xv-HTML-Template

This is a template for typical projects that are generated automatically by the [Gulp](https://gulpjs.com/) (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 `` tag to `` (optional with [gulp-xv-webp](https://www.npmjs.com/package/gulp-xv-webp-html))
* 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
```bash
> npm i
```

### Typical file structure
```bash
./app
/fonts
└── *.ttf or *.otf
/icons
└── *.svg
/images
/js
/scss
└── *.scss

index.html

gulpfile.js
package.json
```

**Output project structure:**
```bash
./(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/`
```bash
> gulp svgSprite
```

Add all fonts from folder `./app/fonts/` to `./app/scss/fonts.scss`
```bash
> gulp fontsCSS
```

## Getting Started

*Clone repo:*
```bash
> git clone https://github.com/xvoland/Gulp-HTML-Template.git
```

*Install Packages:*
```bash
> npm i
```

The project has been created. Edit files...

*Copy Fonts files to* `./app/fonts/`

*Copy SVG files to* `./app/icons/`

*Generate Sprite image:*
```bash
> gulp svgSprite
```

*Generate Fonts CSS:*
```bash
> gulp fontsCSS
```

*Run Gulp:*
```bash
> gulp
```

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

## Mixins
### adptFonts(``, ``)

`Screen Size` - default font size for desktop

`Mobile Size` - target font size for small screens

```SCSS
@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