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