前言
前端开发中，需要用到静态网页渲染器，如 Jekyll、Octopress 等，但这些工具需要一定的静态网站生成器或预编译器的知识，而使用 harp-jade 就能避免这一繁琐的过程。本文将详细介绍如何使用 harp-jade 来快速搭建网站。
简介
harp-jade 是一个使用 Jade 模板引擎和 Sass 预处理器的静态网页渲染器，其优点在于具有快速开发、易于维护和扩展等特性。
安装
安装 harp-jade 库可使用 npm，在命令行终端输入以下命令即可：
--- ------- --------- --
建立项目
安装成功后，进入一个空文件夹，运行以下命令：
---- ---- --------------- ------------- ---------
运行后，项目文件夹中就已经配置好了 harp-jade 来预处理 Sass、转换 Jade、使用 LiveReload。其中 my-jade-project 可以替换为你自己的项目名。
此时，生成的项目结构如下：
- ---------------
-- ------------
-- ----------
-- ------
-- ------------
-- ------------
-- ---
-- ----------
-- ------------
-- ---------_layout.jade 文件是默认生成的页面布局文件，index.jade 会应用这个布局文件来生成 HTML 文件。
创建页面
在 public 文件夹下添加自己的网站页面，例如：
- ---------- - ------------
在 index.jade 和 about.jade 中，可以使用 _header.jade 和 _footer.jade，具体引用方式为：
------- ------- ----- ---- - --- ----- - ----- ----- ----- ------- ------- ------- -- ------- -- -- --------- ------- -------
------- ------- ----- ---- - --- ----- - ------ --- ----- ------- ------- ------- -- ----- -- ------- -------
运行
保存文件后，在命令行中运行以下命令以启动服务器：
---- ------
在浏览器中打开 http://localhost:9000/about.html 和 http://localhost:9000/index.html，就可以看到预处理后的 HTML 文件。
编译
开发完成后，需要将项目编译为静态文件。在项目文件夹中，运行以下命令：
---- -------
编译后的文件将存放在 www 目录下。
总结
harp-jade 是一个开发效率高、易于维护的静态网页渲染器，不需要编写繁琐的 html 或 css，也不需要具有静态网站生成器或预编译器的知识。通过这篇文章的介绍，相信大家能够更好地掌握 harp-jade 的使用，并在实际开发中起到指导作用。
示例代码：
_layout.jade：
------- ----
----
----
---------------------
------ -----
---------------------------------- -------------------
---------------------- ----------------------
----
----- -------_header.jade：
------
-- -- ----
---
----------- ----
--------------------- ----- --
----------------------- ------- --_footer.jade：
------ - --------- - ----
样式文件 public/css/style.scss：
--------------- ----- -- - ------ --------------- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/73030