介绍
buildless-ejs-transform 是一款用于静态网站构建的 npm 包，它可以将 EJS 模板文件转换成 HTML 文件，同时支持 CSS 和 JavaScript 的内联压缩。
相较于传统的静态网站构建工具，如 Jekyll 和 Hexo，buildless-ejs-transform 具有更高的灵活性和自定义性，同时不需要将源文件编译成 HTML，对于开发者来说更加方便快捷。
安装
你可以通过 npm 命令安装该包：
npm install buildless-ejs-transform
使用
配置文件
首先，在你的项目中新建一个名为 build.config.js 的配置文件，用于指定一些构建参数，如下所示：
-- -------------------- ---- -------
-------------- - -
-- --- -------
------- --------
-- -------
---------- -----------
-- ------
------- -----
-- -------
--------- ---------------------
-- --- --- -----
----- -
------ -------
------- -------
-
-其中，srcDir 和 outputDir 分别指定了源文件和构建输出的目录；minify 指定是否启用压缩功能；cacheDir 指定缓存文件的目录，以加快构建速度；data 指定了一个自定义的 EJS 渲染上下文。
模板文件
接下来，在 srcDir 目录下创建一个 .ejs 后缀的 EJS 模板文件，例如 index.ejs：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ----------
-- -- -------- - --
----- ------------- ------------ ------ ----
-- - --
-- -- ---------- - --
----- --------------- ------------ ---------------- -- ----
-- - --
-------
---- -
------------ -----------
-- -- ------------ - --
----------------- ------
------ ------
-- - ---- - --
----------------- ------
------ ------
-- - --
-
--------
-------
------
------- ----- -------
--------- ----------
-------
-------该模板文件中使用了 EJS 的模板语法，允许使用 JavaScript 代码和变量进行动态内容的渲染。
构建
最后，在你的终端执行以下命令，即可构建你的网站：
npx buildless-ejs-transform
构建完成后，你会发现在 outputDir 目录下多了一个 index.html 文件，其中包含了渲染后的 HTML 代码。
进阶
EJS 模板语法
EJS 模板语法非常类似于 JavaScript，支持代码段、控制语句、变量、过滤器等语法。
例如，你可以使用以下语法输出一个变量：
The value of foo is <%= foo %>.
你也可以使用以下语法进行条件判断：
<% if (loggedIn) { %>
Welcome back, <%= user.name %>!
<% } else { %>
Please log in.
<% } %>自定义过滤器
除了默认的 EJS 过滤器外，你也可以自定义自己的过滤器。
例如，你可以定义一个过滤器，将所有文本中的 URL 转换为链接：
-- -------------------- ---- -------
----- --- - ---------------
----- --------------------- - -----------------------------------
-- --- --- -----
------------------ - ------ -- -
------ --------------------------------- --- ------------------
-
-----------------------
------- --------
---------- -----------
----- -
-------- ------- --------------------------
-
---<p><%= content | urlify %></p> <!-- 输出：Hello, <a href="https://www.example.com/">https://www.example.com/</a>! -->
使用 Gulp 和 BrowserSync 进行开发
如果你想要在本地进行网站开发，可以使用 Gulp 和 BrowserSync。
首先，你需要安装以下依赖：
npm install gulp gulp-ejs browser-sync buildless-ejs-transform --save-dev
然后，在项目根目录下新建一个名为 gulpfile.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
----- ----------- - ---------------------------------
----- --------------------- - -----------------------------------
-- ----
-------- ----------- -
-----------------------
------- --------
---------- ----------
---
-------
-
-- -- --- --
-------- ------------ -
------ -----------------------
------------
----------------------------
----------------------------
-
-- -- ----------- ---
-------- ------- -
------------------
------- -----------
----- -----
---
------------------------- ------------------ -------------
---------------------------------------- --------------------
-
--------------- - ------------------ ----------- -------使用 gulp 命令启动本地开发服务器：
gulp
结论
通过本文介绍，你已经可以学会如何使用 buildless-ejs-transform 构建静态网站，并掌握了一些进阶技巧。我们希望这篇文章对你有帮助，并可以为你的网站开发带来便利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664881e8991b448e25e8