在前端开发中，为了提高开发效率和代码质量，我们经常会使用一些工具和库。其中，npm 是前端开发中不可或缺的一部分，因为它提供了各种各样的包和模块，可以快速地帮助我们解决一些问题。
在本文中，我们将介绍一个非常有用的 npm 包 metalsmith-with-postcss，它可以帮助我们在静态网站生成中使用 PostCSS，从而实现像 autoprefixer、CSS 变量等功能。
metalsmith-with-postcss 概述
Metalsmith 是一个静态网站生成器，可以将 Markdown、JSON、YAML 等格式的文本文件编译成 HTML、CSS、JavaScript 文件等。Metalsmith-with-postcss 则是一个 Metalsmith 插件，可以将 PostCSS 集成到 Metalsmith 的编译流程中，从而为我们提供了非常方便的一种方式来处理 CSS。
下面是该插件的一些主要特点：
- 集成了 PostCSS 和 postcss-load-config 等模块，方便我们使用 PostCSS。
- 提供了默认的 PostCSS 配置和一些常用的插件，比如 autoprefixer、cssnano、postcss-preset-env 和 postcss-url 等。
- 可以通过配置文件自定义 PostCSS 插件和配置。
安装 metalsmith-with-postcss
使用 npm 可以很方便地安装 metalsmith-with-postcss：
npm install metalsmith-with-postcss --save-dev
使用 metalsmith-with-postcss
在安装完成之后，我们就可以在 Metalsmith 的配置中使用 metalsmith-with-postcss 了。
首先需要引入该插件：
const metalsmith = require('metalsmith');
const withPostCSS = require('metalsmith-with-postcss');然后，在 Metalsmith 的配置对象中调用 withPostCSS，并配置要使用的插件和参数：
-- -------------------- ---- -------
----- -------------- - -
------------------------
------------------------ ---- ------- -------- ---- --
--
----- -------------- - -
----- ---------- -- --- -------------------
--- ---------- -- --- -------------- ---- --
---- ----- -- ---- ------ ---
------------ ----------
------- ----------
------- ----------
----- ------
------ ----------
-------- -------------- -- --- ------- --
--
---------------------
--------------
---------------------
---------------------------------
-------------- ------ -- -
-- ----- -
-------------------
- ---- -
----------------------- --------
-
---完成以上配置后，我们就可以在 Metalsmith 主目录中添加一个 src 目录，里面存放 CSS 文件，并在配置完成后通过 build 目录查看生成的网站效果。
自定义 PostCSS 插件和配置
如果默认的 PostCSS 插件不能满足你的需求，那么你可以通过配置文件自定义你需要的插件和配置。
在项目的主目录下创建一个名为 postcss.config.js 的文件，然后配置你需要的插件和参数：
-- -------------------- ---- -------
-------------- - -
-------- -
---------------------- ---
---------------------- - -------- ---- --
--------------- - ----- ---- --
-- ----
--
-------- -
----- ----------
--- ----------
---- -----
-- ----
-
--在此，我们只需要在 packages.json 中的 scripts 对象中添加下面的脚本：
{
"scripts": {
"build": "metalsmith"
}
}最后，我们运行下面的命令即可使用自定义的插件和配置：
npm run build
示例代码
以下是一个示例 metalsmith-with-postcss 的项目源代码：
├── build ├── src │ ├── css │ ├── html │ └── images ├── package.json ├── postcss.config.js └── metalsmith.js
在 postcss.config.js 中配置要使用的插件：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------- ---
-------------- - ---- ------- -------- ---- --
--------------- - ----- ---- --
---------- --
--
-------- -
---- ----
-
--在 metalsmith.js 中启用 Metalsmith 插件和 PostCSS 插件，并设置输入输出路径：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - ----------------------------
----- ------- - -----------------------------------
----- ------------- - ----------------------------
---------------------
----------------
-----------------------
------------
----------------------------
------------
------ -
----------- ----
--
----------- ----
---
------------ ------ -- -
-- ----- -
-------------------
- ---- -
----------------------- ----- --------
-
---在 package.json 中添加 build 和 watch 命令：
-- -------------------- ---- -------
-
---------- -
-------- ----- ---------------
-------- ----- ------------- ---
--
--------------- -
------------- ---------
------------------- ---------
-------------------------- ---------
---------- ---------
---------------------- --------
-
-现在，我们就可以在项目中运行以下命令启动服务器：
npm run watch
通过 open http://localhost:8080 访问页面。如果你对你的源代码进行了修改，服务器将根据新的配置重新编译并重新加载网页。
结论
Metalsmith-with-postcss 在静态网站生成中使用 PostCSS，非常方便。它提供了一些默认的 PostCSS 插件和配置，也支持自定义插件和配置。
本文介绍了使用 metalsmith-with-postcss 的基本用法和示例代码，并希望它能够帮助你更好地使用它来优化你的前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f431d8e776d08040e1f