ejs-cli
Enhanced version of EJS cli. A command-line tool based on the ejs wrapper, but with many useful features added.
Features
- Support config files to configure ejs options.
- Multiple .ejs files matching to generate html.
- Multiple ways of data injection into templates.
- Global data injection template
- Monitoring .ejs to output .html files in real time.
Install
$ npm install @wcj/ejs-cli
# Or
$ npm install --global @wcj/ejs-cli
Quick start
$ ejsc "template/**/*"
$ ejsc "template/*.ejs" "template/about/*.ejs" --watch
Command Help
Below is a help of commands you might find useful. You can use the ejsc
and ejs-cli
commands:
Usage: ejs-cli <source...> [options]
Options:
-v, --version Show version number
-h, --help Show help
-w, --watch Listen to ejs changes and output HTML (default: "false")
-o, --out Specify the output directory (default: "dist")
-m, --delimiter Use CHARACTER with angle brackets for open/close (defaults to %)
-p, --open-delimiter Use CHARACTER instead of left angle bracket to open.
-c, --close-delimiter Use CHARACTER instead of right angle bracket to close.
-f, --data-file FILE Must be JSON-formatted. Use parsed input from FILE as data for rendering
--rm-whitespace Remove all safe-to-remove whitespace, including leading and trailing
Examples:
$ ejsc "template/*.ejs" "template/about/*.ejs"
$ ejsc "template/*.ejs" "template/about/*.ejs" --watch
# The above command: matches all `.ejs` files in the template folder
$ ejsc "template/**/*" --watch
$ ejs-cli "template/*.ejs" --watch --out build
Copyright 2023
Match files
Folders and .ejs
files starting with an underscore (_
) will be ignored.
$ ejs-cli "template/**/*"
$ ejsc "template/**/*"
$ ejsc "template/*.ejs" "template/about/*.ejs"
$ ejsc "template/home.ejs" "template/about.ejs"
The above command: matches all .ejs
files in the template folder, excluding files starting with _
and .ejs
files in folders starting with _
.
Inject data
Inject data by default
PUBLIC_PATH
PUBLIC_PATH
Relative path string concatenation. E.g: ../
, ../../
.
<link rel="stylesheet" href="<%= PUBLIC_PATH %>static/css/main.css">
<img src="<%= PUBLIC_PATH %>static/img/logo.png" />
<a href="<%= PUBLIC_PATH %>about/index.html"><a>
GLOBEL
You need to specify the data file --data-file ./data.json
on the command line, or configure the globelData
field in the configuration
<h2><%= GLOBEL.helloworld %></h2>
If the specified ./temp.json
injection data content is an array, the value will be assigned to the template variable of TEMP
. The variable naming rule is uppercase for file names:
-
./a/data-name.json
=>DATA_NAME
-
./temp/data.json
=>DATA
-
./temp/temp.json
=>TEMP
//=> ./a/data-name.json
[
{ name: "ejs", version: "v1.2" },
{ name: "auto-config-loader", version: "^1.7.4" },
];
The value will be assigned to the template variable of DATA_NAME
<% DATA_NAME.forEach((item) => { %>
<div><%= item.name %>@<%= item.version %></div>
<% }); %>
The rules are the same in configuration.
Specific Template
Inject data into a specific template, which needs to be configured in .ejscrc.mjs
:
{
"globelData": {
"helloworld": "Hello Wrold!"
},
"data": {
"template/about/index.ejs": "./data.json",
"template/home.ejs": {
"name": "Hello World",
"age": 36
}
}
}
Used in template/home.ejs
template
<h2><%= name %></h2>
Config
The default configuration is the parameter of EJS, you can add data
to inject data into the EJS template, and add watchOption
parameter to configure Chokidar settings.
Store .ejscrc.json
in the root directory of the project:
{
"watchOption": {},
"data": {
"template/home.ejs": {
"name": "Hello World",
"age": 36
}
}
}
Support JSON, JSONC, JSON5, YAML, TOML, INI, CJS, Typescript, and ESM config load.
.ejscrc.mjs
config example:
/**
* @type {import('@wcj/ejs-cli/lib/watch.mjs').Options}
*/
export default {
/** Chokidar's watch parameter settings */
watchOption: {},
/** Injecting data into EJS templates */
data: {
"template/home.ejs": {
name: "Hello World",
age: 36,
},
},
};
You can configure in package.json
:
{
"name": "@wcj/examples",
"version": "0.0.1",
"ejsc": {
"data": {
"template/home.ejs": {
"name": "Hello World",
"age": 36
}
}
}
}
For more configuration methods, please see default searchPlaces
.
Development
$ npm i
$ npm run build
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
MIT © Kenny Wong