0.0.3 • Published 4 years ago
generator-compiled-html v0.0.3
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-htmlThen generate your new project:
yo compiled-htmlUsage
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 automaticallyGetting 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.
License
MIT © Adenekan Wonderful