@wcj/ejs-cli

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