前言
在开发前端项目时，优化 CSS 代码可以显著提升页面加载速度和用户体验。而 clean-css 是一个非常优秀的 CSS 压缩工具。 metalsmith-clean-css 是一个基于 clean-css 的 Metalsmith 插件，可以让我们在使用 Metalsmith 时优化 CSS 代码。本文将介绍如何使用 metalsmith-clean-css，让前端开发者快速学会如何使用这个 npm 包。
安装
安装 metalsmith 和 metalsmith-clean-css：
npm install metalsmith metalsmith-clean-css --save-dev
使用
在使用 metalsmith-clean-css 之前，我们需要先了解一下 Metalsmith 的基本使用方法。
创建项目
首先，我们可以通过运行以下命令来创建一个新的 Metalsmith 项目：
mkdir my-metalsmith-project && cd my-metalsmith-project npm init
这会询问你一些问题，用来创建一个新的 package.json 文件。在这个过程中，你的 Metalsmith 项目已经创建好了。
创建 src 目录
在项目的根目录下，我们可以创建一个名为 src 的文件夹，用于存放源文件。
mkdir src
Metalsmith 插件
Metalsmith 是一个使用插件进行文件处理的静态网站生成器，你需要使用插件来完成自己的需求。metalsmith-clean-css 是一个 Metalsmith 插件，可以帮助我们优化 CSS 代码。
创建 metalsmith.js 文件
在项目的根目录下，我们可以创建一个名为 metalsmith.js 的文件，用于配置 Metalsmith 的插件和选项。在这个文件中，我们需要添加 metalsmith-clean-css 插件和配置该插件的选项。下面是一个示例：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - --------------------------------
---------------------
----------------
----------------------
----------------
-------------------- -
-- ----- ----- ----
------------------ ------------
---在这个示例中，我们首先引入了 metalsmith 和 metalsmith-clean-css 模块。然后，我们创建了一个 metalsmith 对象并指定源目录(source)和目标目录(destination)。接下来，我们使用了 cleanCss 插件，并将其添加到 Metalsmith 的插件列表中(use)。最后，我们调用 build 方法来执行 Metalsmith，生成网站。
选项
metalsmith-clean-css 插件提供了一些选项，可以用于自定义压缩的行为。下面是一个示例：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - --------------------------------
---------------------
----------------
----------------------
---------------
------ -----------
--------- -
------ -
-
---
-------------------- -
-- ----- ----- ----
------------------ ------------
---在这个示例中，我们传递了一个选项对象给 cleanCss 插件。其中，files 字段指定了需要压缩的 CSS 文件。在这个例子中，所有的 .css 文件都会被压缩。cleanCSS 字段是传递给 clean-css 包的选项。在这个例子中，我们将 clean-css 的压缩级别设置为 2。
结论
metalsmith-clean-css 是一个非常优秀的 CSS 压缩工具，可以让我们在使用 Metalsmith 时优化 CSS 代码。通过本文的介绍，希望读者可以掌握如何使用 metalsmith-clean-css 进行 CSS 代码优化，同时也能够更深入地了解 Metalsmith 的基本使用方法和插件。如果你正在使用 Metalsmith 来生成静态网站，那么使用 metalsmith-clean-css 将会对你的网站性能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68823