npm 包 metalsmith-styl 使用教程

介绍

Metalsmith-styl 是一个基于 Node.js 的前端工具包，用于将 stylus 的样式文件编译成 CSS 文件。它是在 Metalsmith 静态网站生成器的基础上开发的，因此可以很方便地与 Metalsmith 结合使用。适用于前端开发人员以及需要在项目中使用静态网站生成器的人员。

安装

通过 npm 安装 metalsmith-styl：

npm install metalsmith-styl --save-dev

配置

在 Metalsmith 的配置文件中添加以下内容：

const metalsmith = require('metalsmith');
const stylus = require('metalsmith-styl');

metalsmith(__dirname)
  .use(stylus())
  .build();

这将会应用默认的 styl 配置，将 stylus 样式文件编译成 CSS 文件。

你也可以传递一些配置项来配置 styl 插件：

-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------ - ---------------------------

---------------------
  -------------
    ---- -------------
    ----- -------------
    -------- -
      --------- ----
    -
  ---
  ---------

配置项

在上面的配置中，我们传递了一个配置对象。下面是可用的选项：

• include: 匹配要包含的文件的通配符或正则表达式
• exclude: 匹配要排除的文件的通配符或正则表达式
• pattern: 搜索 stylus 文件的通配符或正则表达式，默认为 **/*.styl
• src: 要处理的文件夹路径，默认为 ./src
• dest: 输出的 CSS 文件夹路径，默认为 ./public/css
• path: 设置 stylus 文件解析器中的路径变量，默认为 ./src/stylus
• compile: 用于 stylus render() 的选项（参考），默认为 {}

示例

以下是一个基本的 Metalsmith + metalsmith-styl 配置示例：

const metalsmith = require('metalsmith');
const stylus = require('metalsmith-styl');

metalsmith(__dirname)
  .use(stylus())
  .build();

现在，如果你有这样一个 stylus 文件：

// styles.styl
body
  background: #f0f0f0

h1
  color: #333

当你运行 node metalsmith.js 命令时，它将被转换为：

/* styles.css */
body {
  background: #f0f0f0;
}

h1 {
  color: #333;
}

结论

Metalsmith-styl 是一个非常有用的 npm 包，可以减轻前端开发人员的负担。虽然它有一些自定义选项，但默认设置足以满足大多数需求。无论是编写小型页面还是使用静态网站生成器制作大型项目，它都非常值得一试。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040dbc