# 构建 HTML/CSS/JS

URL: https://caijiao.org/bun/bundler/assets
Source: docs/bun/bundler/assets.md
Description: 介绍如何使用 Bun 构建 HTML、CSS 和 JavaScript 文件，帮助开发者快速构建和优化前端资源，提升开发效率和页面性能。

[Bun](/bun/) 提供了一种简便的方式来构建前端项目，支持 HTML、CSS 和 [JavaScript](/javascript/) 的打包与优化。通过 `bun build` 命令，开发者可以将这些资源高效地打包成适合生产环境的格式，从而减少加载时间并提高性能。以下是如何使用 Bun 构建前端资源的详细步骤。

## 1. 构建 HTML 文件

Bun 支持直接处理 HTML 文件。你可以将 HTML 文件作为入口文件，并通过 `bun build` 命令自动将其与其他资源（如 CSS、JS）进行打包。通常，Bun 会根据项目结构自动处理 HTML 文件的引用和资源路径。

```html
<!-- index.html 示例 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Bun Project</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, Bun!</h1>
  <script src="app.js"></script>
</body>
</html>
````

## 2. 构建 CSS 文件

Bun 可以处理 CSS 文件的打包与优化。通过在项目中引用外部或内联 CSS，Bun 会自动将这些 CSS 文件打包、压缩，并将它们注入到生成的 HTML 文件中。你也可以使用预处理器如 SCSS，Bun 会在构建过程中自动处理这些文件。

```css
/* styles.css 示例 */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}
```

## 3. 构建 JavaScript 文件

Bun 同样支持 [JavaScript](/javascript/) 的打包与优化。通过 `import` 和 `export` 语法，你可以使用 ES 模块，Bun 会将你的 JavaScript 文件进行压缩和优化。所有的 JS 文件都将被打包到输出目录，并与 HTML 和 CSS 文件一起部署。

```js
// app.js 示例
import { greet } from './greet.js';

greet();

export function greet() {
  console.log("Hello from Bun!");
}
```

## 4. 执行构建

完成配置后，运行以下命令进行构建：

```bash
bun build
```

Bun 会自动将 HTML、CSS 和 JS 文件进行打包，并输出到指定目录，通常是 `dist/` 目录。

## 5. 部署与优化

打包后的文件可以轻松部署到生产环境中。通过对 CSS 和 JS 进行压缩，HTML 文件会引入经过优化的资源，确保加载速度更快，提升用户体验。

## 总结

Bun 提供了高效的方式来构建 HTML、CSS 和 [JavaScript](/javascript/) 文件，通过简单的命令即可将项目资源打包并优化。开发者可以方便地使用 Bun 来加速前端开发，同时提升应用性能。