generator-compiled-html
v0.0.3
Published
a component html
Downloads
5
Maintainers
Readme
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.
License
MIT © Adenekan Wonderful