Nodejs: Harp - An open-source web server with built-in pre-processing

Nodejs: Harp - An open-source web server with built-in pre-processing

http://harpjs.com/

文件服务器, 集成多种前端语言的预编译, 以及推送到各个平台

2 回复

Node.js: Harp - An Open-Source Web Server with Built-In Pre-Processing

Harp 是一个开源的静态网站服务器，它不仅提供了基本的文件服务器功能，还集成了多种前端语言（如 CoffeeScript、Sass 和 Markdown）的预编译。这意味着你可以在开发过程中使用这些高级语言，并且 Harp 会自动将它们转换为浏览器可以理解的格式（如 JavaScript 和 CSS）。此外，Harp 还支持将网站直接推送到各种平台。

安装 Harp

首先，你需要安装 Node.js。然后，通过 npm (Node Package Manager) 安装 Harp：

npm install -g harp

启动 Harp 服务器

假设你有一个项目目录 my-project，其中包含一些静态文件和一些需要预编译的前端语言文件（例如 index.jade 和 styles.sass）。你可以通过以下命令启动 Harp 服务器：

cd my-project
harp server

这将在默认端口 9000 上启动服务器。你可以通过浏览器访问 http://localhost:9000 来查看你的网站。

使用预编译功能

Harp 会自动处理文件的预编译。例如，如果你在项目中创建了一个 index.jade 文件，当你访问 http://localhost:9000/index.html 时，Harp 会自动将 Jade 模板转换为 HTML。

同样地，如果你有一个 styles.sass 文件，Harp 会在页面加载时将其编译为 CSS。

示例文件结构

my-project/
├── index.jade
├── styles.sass
└── images/
    └── logo.png

在这个简单的项目结构中，index.jade 文件是一个 Jade 模板，styles.sass 文件是一个 Sass 样式表。Harp 会自动处理这些文件，并生成相应的 HTML 和 CSS 文件。

推送至平台

Harp 还提供了一些工具来帮助你将网站部署到不同的平台。例如，你可以使用 Harp 的 export 命令将整个网站导出为静态文件，然后上传到任何静态文件托管服务（如 GitHub Pages 或 Netlify）。

harp export ./public

这将把 public 目录中的所有文件复制到 ./public 目录中，你可以将该目录上传到你的托管服务提供商。

总之，Harp 是一个非常强大的工具，可以帮助你更高效地开发和部署静态网站。它简化了前端开发流程，使你能够专注于编写高质量的代码，而不是处理复杂的构建过程。


Harp 是一个开源的 Node.js 网页服务器，它具有内置的预处理功能。Harp 可以自动处理各种前端技术，如 Stylus、EJS、CoffeeScript 等，并将它们编译为标准的 CSS、HTML 和 JavaScript 文件。这使得开发者可以专注于编写干净、简洁的代码，而无需手动处理编译过程。

安装 Harp

首先，确保你已经安装了 Node.js 和 npm。然后可以通过 npm 全局安装 Harp：

npm install -g harp

使用 Harp 创建项目

  1. 在你的工作目录中创建一个新的文件夹作为项目根目录。

  2. 进入该文件夹并初始化一个新的 Harp 项目：

    harp init

  3. 启动 Harp 服务器：

    harp server

    默认情况下，Harp 将启动一个本地服务器，并监听 http://localhost:9000。

示例项目结构

假设我们有一个简单的 Harp 项目，其结构如下：

/project-root
  /public
    index.ejs
    styles.styl
  /views
    layout.ejs
  • public 目录用于存放静态资源。
  • views 目录用于存放视图文件，Harp 会自动编译这些文件。

示例代码

index.ejs (位于 /public)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Harp Example</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>Welcome to Harp!</h1>
    <%- include('layout') %>
</body>
</html>

styles.styl (位于 /public)

body
  background-color #f0f0f0
  font-family Arial, sans-serif

Harp 的编译过程

当启动 Harp 服务器时，Harp 会自动将 .styl 文件编译为 .css 文件，并将 .ejs 文件渲染为 HTML。例如，styles.styl 会被编译为 styles.css，而 index.ejs 会被编译为 index.html。

总结

Harp 是一个强大的工具，能够简化前端开发流程。通过使用 Harp，你可以轻松地使用多种前端语言，同时享受自动编译带来的便利。

回到顶部