What is Gluu? Gluu is a lightweight html compiler which help in maintaining large html/css/js projects by using partials. Gluu help writing clean and maintainable code. Sometime you dont want to use heavy frameworks but need features like partials and two way communication.
What is a partial? Partial is a reusable code which you can use throughout the project. for example header, footer, sidebar can be shared between all pages. It will make the code more readable and easy to maintain.
Benefits of Partials? Partial allows you writing clean, fast and maintainable code.
Gluu is one of the simple HTML framework that you will use.
- npm
npm install gluu
----- YARN ------
yarn add gluu
create a gluu config file by running below command:
gluu init
you can manually create a gluu.config.json file and a folder named partials at the project root. default glue.config.json
{
"partialDirectory": "partials",
"syntax": "partial",
"output": "dist",
"ext": ".html",
"src": "src",
"pretty:true
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Basic Example of Implementing Partials -->
<!-- gluu will search demo.html file inside the "partials" folder -->
<partial name="demo.html" />
</body>
</html>
<partial name="demo.html" heading="This is a h1 heading" />
to use the parameter in partial file simply use {parameter}
<!-- demo.html -->
<h1>{heading}</h1>
There are times when you need to add some style/script dependencies to partial but do not want them to be included in the complied file. In most of the cases its because the main file already has the code. to prevent the duplicate code added to the complied html, use ignore tag.
<!-- any partial can have it -->
<ignore>
<!-- your script/style here -->
</ignore>
- "-l" to show logs
- "--pretty=false" to disable prettier
- pass content to partial
- Process multiple files
- Prettify output files
- add content to head/footer from the partial