什么是 exygen？
exygen 是一个基于 Node.js 平台，用于对 web 网页进行静态文件生成的工具。它采用了简单易用的命令行操作方式，支持大量的模板引擎以及页面片段化的设计方式，可以让前端开发者很方便地生成符合需求的静态文件，且在一定程度上降低了后端工作人员的压力。
如何使用 exygen？
exygen 是一个 npm 包，使用前请确保已经安装了 Node.js 环境。安装 exygen 可以直接执行以下命令：
npm install exygen -g
安装完成后就可以使用 exygen 命令了。
exygen 的命令
exygen init
exygen init 命令用于在当前目录下初始化一个 exygen 项目，生成默认的配置文件和一些必要的目录，以便后续的操作。
exygen init
执行完这个命令后，当前目录将生成一个 exygen 的项目结构，如下所示：
-- -------------------- ---- -------
- ---- - -------
- -------
- -----
- ----------
- ---------
- -------
- ----------
- ---------
- -----
- ------
- ---------
- ---------
- -------
- -----------
- ------- - ------
- ------
- -----------
- -------
- ------- - ---------
- ----------
- ----------- - ------ ----exygen build
exygen build 命令用于生成静态文件，它会在当前目录下生成 /public 目录以及其中的静态文件。
exygen build
在执行这个命令之前，需要对 exygen.json 文件中的配置项进行相应的修改，以确保静态文件的生成满足需求。
exygen serve
exygen serve 命令用于启动本地服务器，以展示生成的静态文件。
exygen serve
执行这个命令后，会在本机的 8000 端口启动一个服务器，并将静态文件在浏览器中打开，以方便用户查看和测试。
exygen 的配置项
在 exygen.json 文件中有一些重要的配置项，需要进行相应的设置，才能生成符合需求的静态文件。
meta
meta 配置项用于设置生成静态文件时的一些元信息，如 title，keywords，description 等。
示例代码：
"meta": {
"title": "我的网站",
"keywords": "前端,exygen",
"description": "这是我的网站"
}template
template 配置项用于设置模板引擎的相关信息，如模板引擎的类型，模板文件的路径等。exygen 支持大量的模板引擎，如 EJS，Handlebars，Jade，Swig 等。
示例代码：
"template": {
"engine": "ejs",
"path": "app",
"ext": ".ejs",
"layout": "layout/default.ejs"
}app
app 配置项用于设置静态文件的生成规则和目录结构。
示例代码：
-- -------------------- ---- -------
------ -
------- ------
--------- -
--------- -
---------- -
------- -
------------------------
------------------------
--
--------- -
--------------------------
--------------------------
-
-
-
--
------- -
-------- -
------- -
-------- -----
---------- ------
--
----------- ----------------
-
-
-exygen 的实例
下面是一个完整的 exygen 实例，以 EJS 为模板引擎，生成一个包含 Header，Footer 以及 Index 三个页面的网站。
exygen.json
-- -------------------- ---- -------
-
------- -
-------- -------
----------- ------------
-------------- --------
--
----------- -
--------- ------
------- ------
------ -------
--------- --------------------
--
------ -
------- ------
--------- -
--------- -
---------- -
------- -
------------------------
------------------------
--
--------- -
--------------------------
--------------------------
-
-
-
--
------- -
-------- -
------- -
-------- -----
---------- ------
--
----------- ----------------
-
-
--
--------- -
------- --------
--
--------- -
------- -----
------- --------
-
-/app
-- -------------------- ---- -------
- ----
- -------
- -----
- ----------
- ---------
- -------
- ----------
- ---------
- -----
- ------
- ---------
- ---------
- -------
- -----------/public
- public/ - index.html
/app/common/head/script.ejs
<script src="/js/main.js"></script>
/app/common/head/style.ejs
<link rel="stylesheet" href="/css/main.css">
/app/common/footer/script.ejs
<script src="/js/footer.js"></script>
/app/common/footer/style.ejs
<link rel="stylesheet" href="/css/footer.css">
/app/template/layout/default.ejs
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- --------------- ------------ ------------- ----
----- ------------------ ------------ ---------------- ----
---------- ---------- -- - --- ---------- ----------
-- ------- --------------------- --
-- ------- ---------------------- --
-------
------
--------
------- ---------- -------
---------
------
--- ---- --
-------
--------
--------- ---- -- ------------
---------
-- ------- ----------------------- --
-- ------- ------------------------ --
-------
-------/app/page/index/index.ejs
<section> <h2><%- data.title %></h2> <p><%- data.content %></p> </section>
/public/index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- --------------- --------------------
----- ------------------ -----------------
--------- - ------------
----- ---------------- ---------------------
------- ---------------------------
-------
------
--------
-------------
---------
------
---------
-----------
-----------
----------
-------
--------
--------- ---- -- ------------
---------
----- ---------------- -----------------------
------- -----------------------------
-------
-------以上就是 exygen 的使用方法以及配置项介绍，希望对前端开发者有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dc037