前言
在前端开发过程中，我们常常需要使用到模板引擎来构建页面。其中，Assemble 是一个强大的静态网站生成器，而 engine-assemble 则是 Assemble 的默认模板引擎。它可以让我们更轻松地创建网站，同时也提高工作效率和代码质量。
本文将详细介绍 engine-assemble 的使用方法，并提供了一些示例代码，帮助读者快速上手。
使用方法
安装 engine-assemble
首先，我们需要安装 engine-assemble，并将其添加到项目中。在终端中输入以下命令：
npm install engine-assemble --save-dev
配置 engine-assemble
接着，在你的 gulpfile.js 中，加入以下代码以使用 engine-assemble：
const assemble = require('assemble');
const engine = require('engine-assemble');
assemble.engine('hbs', engine);
assemble.option('layout', 'default');
assemble.option('partials', ['partials/*.hbs']);
// gulp 任务代码这里的 hbs 是 engine-assemble 的文件扩展名，layout 指定了默认的布局文件，partials 指定了所有局部文件的文件夹。你也可以使用其他扩展名和路径，根据自己的需要进行配置。
创建模版和布局
现在，我们可以开始创建模版和布局文件了。在文件夹 views 中，新建一个文件 home.hbs：
---
title: Home
---
<h1>{{title}}</h1>
<p>Welcome to my home page!</p>在文件夹 views/partials 中，新建一个文件 header.hbs：
-- -------------------- ---- -------
--------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------最后，在 views 文件夹中，新建一个布局文件 default.hbs：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------ ------- ------ --- ------ -- -------- ----------- ---------- ------- -------
在这里，我们通过 {{> header }} 载入了 header 局部文件。注意，{{#block "content"}}{{/block}} 标签可以让我们在模板中嵌入内容。
生成网站
现在，我们可以通过 Gulp 命令来生成静态网站了。在你的 gulpfile.js 中，添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - --------------------
----- ------ - ---------------------------
----- ------ - -----------------------
----- --- - -----------
----------------- --------
-----------------------------------
-------------------------------------
--------------------- ---------- -
------ ----------------------
-----------------------
--------------------------- -
------------ - --------
---
------------------------
---
-------------------- --------------以上代码中，我们使用 gulp-rename 插件将输出文件扩展名改为 .html，这样我们就可以在浏览器中预览生成的静态网站了。 在终端中输入以下命令即可编译生成网站：
gulp
现在，你可以在 dist 文件夹中找到生成的静态网站。打开 home.html 文件，你可以看到以下内容被正确地渲染出来：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------
-------
------
--------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------
-------------
---------- -- -- ---- ---------
-------
-------总结
在本文中，我们详细介绍了 engine-assemble 的使用方法，包括安装和配置 engine-assemble，创建模版和布局文件，最后通过 gulp 编译生成网站。
使用 engine-assemble 可以让我们更方便地创建静态网站，并提高我们的工作效率和代码质量。通过本文的指导和示例代码，相信读者能够快速上手 engine-assemble，并将其应用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf39