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

https://github.com/alajmo/pure-html

:wrench: A command line tool for creating standalone html files
https://github.com/alajmo/pure-html

cli development devtools html inline inline-css library

Last synced: 5 days ago
JSON representation

:wrench: A command line tool for creating standalone html files

Awesome Lists containing this project

README

          

# pure-html

Sometimes you just want to create a standard html file with no dependencies, this little plugin helps you do just that with **hot-reloading** of html and css!

**Go from this:**

*index.html*
```html







Test


```

*style.css*
```html
body, html {
display: flex;
background: blue;
}
```

*script.js*
```html
console.log('Hello World!');
```

**To this:**

*index.html*
```html


@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype')}
body,html{display:-webkit-box;display:-ms-flexbox;display:flex;background:#00f}



Test

console.log("hello world");

```

## Features

* Inline css and js
* Hot-reloading of html and css
* Css autoprefixer
* Html Validation

## Requirements

* Node 8 >=

## Usage

```txt
Usage: pure-html [options]

Command line tool for creating standalone html files.

Options:

-V, --version output the version number
-w, --watch start browsersync. [boolean] [default: false]
-s, --src [path] source folder. [string] [default: current working directory]
-d, --dest output folder. [string] [required]
-p, --port [port] port browswersync listens on. [integer] [default: 3000]
-l, --html-lint enable HTML lint. [boolean] [default: false]
-h, --help output usage information

Examples:

$ pure-html -w -p 8000 -s src -d dist
$ pure-html -d output-folder
```

Additionally, I can recommend [Base 64 encoding](http://b64.io/) in-case you want to inline svg's.

## Development

Follows [Conventional Commits](https://conventionalcommits.org/).