generator-compiled-html

v0.0.3

Published

2 years ago

a component html

Downloads

0High
0Medium
0Low

codewonders

javascript codewonders js utility functions utilities generator generator template

Drag Racing

Compiled HTML Generator

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 and generator-compiled-html using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-compiled-html

Then generate your new project:

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

<!DOCTYPE html>
<html>
  <head>
    @include('./components/head.html', {"title": "Dashboard"})
  </head>
  <body>
    @include('./components/view.html')
  </body>
</html>

/components/head.html

<meta charset="utf-8" />
<title>@title of my first compiled html</title>
<meta name="description" content="" />
<meta name="author" content="" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

/components/view.html

<h2>Hello There</h2>

Now your compiled HTML file should look like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>@title of my first compiled html</title>
    <meta name="description" content="" />
    <meta name="author" content="" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <h2>Hello There</h2>
  </body>
</html>

see more of what you can do here

Useful commands

$ 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.