介绍
metalsmith-autoprefixer-gustavnikolaj 是一款用于自动为 CSS 样式添加浏览器兼容前缀的 npm 包。其通过使用 autoprefixer(https://github.com/postcss/autoprefixer) 插件来实现对 CSS 样式的自动化处理，可以减少前端开发人员的手动操作，提升生产效率。其开发者 GustavNikolaj 在 GitHub 上开源了该 npm 包的源代码（https://github.com/GustavNikolaj/metalsmith-autoprefixer-gustavnikolaj），方便用户自定义和修改。
安装步骤
使用 metalsmith-autoprefixer-gustavnikolaj 前，需要先安装 Node.js 和 npm 包管理器。
- 在命令行中输入以下命令，安装 metalsmith-autoprefixer-gustavnikolaj：
npm install metalsmith-autoprefixer-gustavnikolaj --save-dev
- 在项目根目录下创建一个 metalsmith 配置文件（如
metalsmith.js），并添加以下代码：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- ------------ - -------------------------------------------------
---------------------
-------------------
-------- ------
--------- ------ - ----------
---
---------常用配置选项
- browsers - 要支持的浏览器版本，通常是最近两个版本。支持的浏览器可以参考：https://github.com/postcss/autoprefixer/blob/master/README.md#browsers。
- cascade - 布尔值，表示是否按照四个空格的缩进格式输出 CSS 样式。
在 metalsmith.js 中，这些选项可以通过传递一个配置对象来进行设置，例如：
metalsmith(__dirname)
.use(autoprefixer({
cascade: false,
browsers: ['last 2 versions']
}))
.build();示例代码
以下是一个简单的示例代码：
body {
display: flex;
align-items: center;
justify-content: center;
transition: all .3s;
}使用 metalsmith-autoprefixer-gustavnikolaj 处理后，生成的 CSS 样式会自动添加浏览器兼容前缀，并输出到 build 目录下：
-- -------------------- ---- -------
---- -
-------- ------------
-------- ------------
-------- -----
------------------ -------
--------------- -------
------------ -------
----------------- -------
-------------- -------
---------------- -------
----------- --- ----
- 这样一来，前端开发人员就可以专注于 CSS 样式的编写，而不必再手动添加浏览器兼容前缀，大大提高开发效率。
总结
metalsmith-autoprefixer-gustavnikolaj 是一个非常方便的 npm 包，可以自动为 CSS 样式添加浏览器兼容前缀，适合于前端开发人员的日常工作。无论是在个人项目中，还是在团队项目中，都可以使用该 npm 包来提高生产效率，减少手动操作的次数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f431d8e776d08040e27