Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adenekan41/generator-compiled-html
☔️Generator package for compiled-html
https://github.com/adenekan41/generator-compiled-html
codewonders compiled-html component-html gulp html javascript
Last synced: about 2 months ago
JSON representation
☔️Generator package for compiled-html
- Host: GitHub
- URL: https://github.com/adenekan41/generator-compiled-html
- Owner: adenekan41
- License: mit
- Created: 2020-02-26T01:00:16.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-02-29T21:45:04.000Z (almost 5 years ago)
- Last Synced: 2024-12-18T06:23:25.764Z (about 2 months ago)
- Topics: codewonders, compiled-html, component-html, gulp, html, javascript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/generator-compiled-html
- Size: 89.8 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Compiled HTML Generator [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] [![Coverage percentage][coveralls-image]][coveralls-url]
[](https://nodei.co/npm/generator-compiled-html/)
> A Starter project to make writing html really simple and easy powered by gulp.
### ⚡️ Live Reload
### 🔥 Component Based
### 🔧 ~1MB
### 📝 Raw HTML
### ✅ SCSS supported
### 🚀 Deploy With Surge
## Helper Functions
> Still in progress coming up with useful helper by gulp-file-include and some other useful compilers
## Installation
First, install [Yeoman](http://yeoman.io) and generator-compiled-html using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).
```bash
npm install -g yo
npm install -g generator-compiled-html
```
Then generate your new project:
```bash
yo compiled-html
```
## Usage
Getting familiar with the template and you want to use some helper functions in your HTML file like import sidebar components or generate head components differently for each files
`@`, Prefix to the world just import using them the following ways.
`index.html`
```html
@include('./components/head.html', {"title": "Dashboard"})
@include('./components/view.html')
```
`/components/head.html`
```html
@title of my first compiled html
```
`/components/view.html`
```html
Hello There
```
Now your compiled HTML file should look like this
```html
@title of my first compiled html
Hello There
```
### [see more of what you can do here](https://www.npmjs.com/package/gulp-file-include)
## Useful commands
```sh
$ npm run start #starts the app
$ npm run copy #copies any html code in working directory to build directory
$ npm run flush #delets cached compile by gulp
$ npm run watch #watchs files and updates
$ npm run connect #starts server without running gulp default
$ npm run deploy #deploys to surge automatically
```
## Getting To Know Yeoman
- Yeoman has a heart of gold.
- Yeoman is a person with feelings and opinions, but is very easy to work with.
- Yeoman can be too opinionated at times but is easily convinced not to be.
- Feel free to [learn more about Yeoman](http://yeoman.io/).
## License
MIT © [Adenekan Wonderful]()
[npm-image]: https://badge.fury.io/js/generator-compiled-html.svg
[npm-url]: https://npmjs.org/package/generator-compiled-html
[travis-image]: https://travis-ci.com/adenekan41/generator-compiled-html.svg?branch=master
[travis-url]: https://travis-ci.com/adenekan41/generator-compiled-html
[daviddm-image]: https://david-dm.org/adenekan41/generator-compiled-html.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/adenekan41/generator-compiled-html
[coveralls-image]: https://coveralls.io/repos/adenekan41/generator-compiled-html/badge.svg
[coveralls-url]: https://coveralls.io/r/adenekan41/generator-compiled-html