npm 包 recess 使用教程

介绍

recess 是一个用于检查 CSS 文件并生成优化 CSS 样式的 npm 包。它可以自动检测 CSS 文件中的错误、风格问题、性能问题等，并尝试解决它们，最终为您生成一个更加干净、整齐的 CSS 文件。

安装

使用 npm 安装 recess：

npm install recess

使用

命令行

在终端中使用 recess，输入以下命令：

recess path/to/styles.css

这将会对 styles.css 文件进行检查和优化。如果您的文件包含错误、警告或者其他问题，recess 会在终端中打印出详细的信息，以帮助您解决这些问题。如果您的文件已经很好了，recess 会告诉您没有错误或警告。

gulp

要使用 Gulp 运行 recess，您需要先安装 gulp-recess：

npm install gulp-recess

然后在 Gulpfile 中添加以下代码：

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

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

示例代码

下面是一个使用 recess 优化 CSS 的示例代码：

body {
  width: 100%;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

使用命令行或者 Gulp 运行 recess 之后，recess 会自动将上面的 CSS 代码优化成如下形式：

body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
  width: 100%;
}

如您所见，recess 调整了 CSS 属性的顺序，这样有利于代码的可读性和可维护性，因为相关属性会呈现在一起。

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