CSS 如何设置自定义 ESBuild 与 SCSS、PurgeCSS 和 LiveServer

在本文中，我们将介绍如何设置自定义的 ESBuild 构建工具来使用 SCSS、PurgeCSS 和 LiveServer。ESBuild 是一个快速的 JavaScript 打包工具，同时支持自定义配置，因此我们可以通过它实现我们所需的功能。

阅读更多：CSS 教程

1. 安装 ESBuild

首先，我们需要安装 ESBuild。可以使用以下命令在全局环境中安装：

npm install -g esbuild

2. 创建项目并初始化

在开始之前，我们需要创建一个新的项目并初始化。首先，创建一个新的项目文件夹并打开终端。然后，运行以下命令：

npm init -y

这将初始化一个新的 npm 项目。

3. 安装依赖

接下来，我们需要安装我们所需的依赖项。运行以下命令来安装 ESBuild、SCSS、PurgeCSS 和 LiveServer：

npm install esbuild sass purgecss nodemon

4. 配置 ESBuild

在项目文件夹中创建一个名为 build.js 的文件，并在其中添加以下代码：

const esbuild = require("esbuild");
const fs = require("fs");

esbuild.build({
  entryPoints: ["src/index.js"],
  bundle: true,
  outfile: "dist/bundle.js",
  bundle: true,
  define: { "process.env.NODE_ENV": '"production"' },
}).catch(() => process.exit(1));

这是一个非常简单的 ESBuild 配置，它将 src/index.js 文件打包为 dist/bundle.js。

5. 配置 SCSS

在项目文件夹中创建一个名为 style.scss 的文件，并添加一些简单的 SCSS 代码：

$primary-color: #ff0000;

body {
  background-color: $primary-color;
}

6. 添加脚本命令

打开项目的 package.json 文件，在 scripts 部分添加以下内容：

"scripts": {
  "build": "node build.js",
  "sass": "sass src/style.scss dist/style.css",
  "purgecss": "purgecss --config purgecss.config.js --output dist/style.min.css --css dist/style.css",
  "start": "npm run sass && npm run purgecss && npm run build"
}

这将添加用于编译 SCSS 文件、运行 PurgeCSS 和 ESBuild 的脚本命令。

7. 配置 PurgeCSS

在项目文件夹中创建一个名为 purgecss.config.js 的文件，并添加以下代码：

module.exports = {
  content: ["src/**/*.html", "src/**/*.js"],
  css: ["dist/style.css"],
  whitelist: ["body"],
};

这个配置将告诉 PurgeCSS 检查哪些文件，并将结果输出到 dist/style.min.css。

8. 配置 LiveServer

在项目文件夹中创建一个名为 server.js 的文件，并添加以下代码：

const liveServer = require("live-server");

liveServer.start({
  port: 8080,
  root: "dist",
  open: true,
});

这个配置将在 dist 文件夹中启动一个简单的 HTTP 服务器，监听 8080 端口并自动打开浏览器。

9. 运行项目

最后，运行以下命令来启动项目：

npm start

这将编译 SCSS 文件、运行 PurgeCSS、使用 ESBuild 构建 JavaScript 文件，并启动 LiveServer。

总结

通过自定义 ESBuild 配置，我们成功地设置了一个可以使用 SCSS、PurgeCSS 和 LiveServer 的项目。我们可以根据自己的需求进一步扩展和优化这个配置，以满足我们的项目需求。ESBuild 提供了强大的打包能力，而 SCSS 和 PurgeCSS 能够帮助我们更好地组织和优化 CSS 代码。LiveServer 则提供了实时预览和调试的能力，使我们的开发工作更加高效。希望本文对你有所帮助！