ejs2html
A simple CLI for making HTML files from EJS templates.
Install:
npm i ejs2html -gUsage:
ejs2html [options] <config> [dest]Options:
-h, --help output usage information
-V, --version output the version number
-r, --read <variable_name> Read contents from stdin, if available, and pipe to a given global variable name in the config.
Config
Everything runs off of the config file. It looks something like this.
{
"files": [
{
"dest": "index.html",
"template": "layout",
"locals": {
"title": "Home",
"message": "Welcome to my app."
}
},
{
"dest": "about/index.html",
"template": "layout.ejs",
"locals": {
"title": "About",
"message": "This is the about page."
}
}
],
"globals": {
"app_name": "My App"
}
}At the root level of the config should be:
- files: An array of objects for each file that you want to create.
- global: Variables that are available to all files.
Each file object inside of files should include:
- template: The EJS template to use to create the file (.ejs extension is optional).
- locals: (Optional) Variables that are scoped to this page.
-
dest: The filepath of the output file.
-
Note: This is relative to the
destparam from the command line. - Full path will look like this:
[cli-dest]/[file-dest][.html]. -
.htmlextension is optional
-
Note: This is relative to the
Reading stdin
Using the -r, --read <var_name> option allows you to receive piped data and set the data to a global variable that can be used in your templates. Without declaring this option, ejs2html will not do anything with the piped data.
So this will set a new global variable called message to the contents of hello.txt:
cat hello.txt | ejs2html config.json --read messageHowever, the piped data will be ignored in this example:
cat hello.txt | ejs2html config.jsonExample:
cat hello.txt | ejs2html config.json --read message"hello.txt"
Hello world!
"layout.js"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p><%- message %></p>
</body>
</html>"config.json"
{
"files": [
{
"dest": "index.html",
"template": "layout",
}
],
"globals": {
"title": "My Site",
"message": ""
}
}The result would be:
"index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>
<body>
<h1>My Site</h1>
<p>Hello world!</p>
</body>
</html>Examples
One File
_"src/ejs/config.json"
{
"files": [
{
"dest": "index.html",
"template": "layout",
"locals": {
"title": "Home",
"message": "Welcome to my app."
}
}
],
"globals": {
"app_name": "My App"
}
}_"src/ejs/layout.ejs"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= app_name %></title>
</head>
<body>
<h1><%= title %></h1>
<p><%= message %></p>
</body>
</html>Running...
ejs2html _src/ejs/config.jsonYields...
"index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Home</h1>
<p>Welcome to my app.</p>
</body>
</html>===
Partials
- The paths for the partials should be relative to the file in which they are being included.
_"src/ejs/partials/header.ejs"
<h1><%= title %></h1>_"src/ejs/partials/body.ejs"
<p><%= message %></p>_"src/ejs/layout.ejs"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= app_name %></title>
</head>
<body>
<%- include('partials/header') %>
<%- include('partials/body') %>
</body>
</html>Running the following with same config as above would yield the same result as the previous example...
ejs2html _src/ejs/config.json===
Multiple Templates
_"src/ejs/config.json"
{
"files": [
{
"dest": "index.html",
"template": "layout",
"locals": {
"title": "Home",
"message": "Welcome to my app."
}
},
{
"dest": "about/index.html",
"template": "layout",
"locals": {
"title": "About",
"message": "This is the about page."
}
}
],
"globals": {
"app_name": "My App"
}
}_"src/ejs/layout.ejs"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= app_name %></title>
</head>
<body>
<h1><%= title %></h1>
<p><%= message %></p>
</body>
</html>Running...
ejs2html _src/ejs/config.jsonYields...
"index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, excepturi.</p>
</body>
</html>"about/index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>About</h1>
<p>This is the about page.</p>
</body>
</html>Scripts
sample
npm run sampleRuns some example stuff inside of /example.