如何在VPS上安装和使用Recess

来自菜鸟教程
跳转至:导航、​搜索


状态: 已弃用

本文介绍了不再受支持的 Ubuntu 版本。 如果您当前正在运行运行 Ubuntu 12.04 的服务器,我们强烈建议您升级或迁移到受支持的 Ubuntu 版本:

原因: Ubuntu 12.04 已于 2017 年 4 月 28 日终止生命周期 (EOL) and no longer receives security patches or updates. This guide is no longer maintained.

请参阅:
本指南可能仍可用作参考,但可能不适用于其他 Ubuntu 版本。 如果可用,我们强烈建议使用为您正在使用的 Ubuntu 版本编写的指南。 您可以使用页面顶部的搜索功能来查找更新的版本。


关于课间


Recess 是由 Twitter 开发的代码质量工具,旨在通过执行准则帮助您编写更好的 css。 Recess 建立在 LESS 之上,可用作开发过程中的 linter,以保持代码清洁和可维护。

在本教程中,我们将在运行 Ubuntu 12.04 的 VPS 上安装 Recess。 您应该已经安装了自己的虚拟专用服务器,以及 Node.js 和 NPM(Node Packaged Modules)。 如果您不这样做,请按照 本教程 中概述的步骤进行设置。

安装


一旦 Node 和 NPM 在您的虚拟服务器上,运行以下命令来安装 Recess:

npm install recess -g

现在有趣的部分:使用 Recess

那么你将如何使用这个很酷的代码助手呢? 好吧,有一些关于编写 css 的标准规则。 例如,您不应过度限定选择器或在其中使用 #ids。 Recess 在其配置中内置了其中一些规则,您可以让它运行您的 css 文件并检查它们。

安装 Recess 后,您有以下开箱即用的规则:

  • noIDs - Don't 样式 ID,如 #foo
  • noJSPrefix - Don't 样式 .js- 前缀类名
  • noOverqualifying - 不要'过度限定你的选择器,比如 div#foo.bar
  • noUnderscores - 不要'在命名类时使用下划线,例如 .my_class
  • noUniversalSelectors - 不要' 使用通用选择器 *
  • zeroUnits - Don't 将单位添加到值 0,例如 0px
  • strictPropertyOrder - 强制执行严格的属性顺序(顺序定义 here

要对其进行测试,请创建一个简单的 css 文件并粘贴以下内容:

#my-id {
 color:red;
}
.my_bad_class {
 color:red;
}


Save the file and exit. Now run the following command in your terminal:

recess path/to/css/file.css


This command will check your file and report the problems. In our test css file we broke 2 rules, so Recess should flag them. If you want to have it run through all the css files in a folder, run the command like this:

recess path/to/css/folder/*


This will target all css files in that folder.

Now say that for some reason you want to use #ids in your css and don't want Recess to flag them. You can run the following command:

recess path/to/css/file.css --noIDs false


With this command, you pass an option to set that particular rule to false. You can add even more if you'd like:

recess path/to/css/file.css --noIDs false --noUnderscores false


This will now show you that our test file is perfect since neither of the rules we broke are now flagged.

But let's say you don't want to keep passing these options everytime and you want Recess to always take into account that these rules should not be checked against. You need to create a config file called .recessrc. 您有 2 个选项可以放置此文件:

  • 您可以将文件放在将运行 recess 命令的文件夹中。 在这种情况下,您所要做的就是运行不带任何选项的命令,配置就会被拾取。
  • 您将它放在另一个文件夹中,而不是从您运行 recess 命令的位置。 在这种情况下,您必须将配置文件的路径作为选项传递。 例如:
recess path/to/css/file.css --config=path/to/config/.recessrc


But what do you place inside the file? Well that depends on what you want to rule out. If you want to make sure the 编号 and 没有下划线 rules are not taken into account, you can paste the following:

{
"noIDs": false,
"noUnderscores": false
}


Another cool thing is that you can use Recess to compile the css (or LESS) file and make some automated changes for you. For example, if the order of your properties is not good, you can have Recess compile the file and output to the terminal the css file in the right property order. Just add the --编译 option to the command:

recess path/to/css/file.css --compile


It can't fix all the broken rules but it will normalize whitespace, strip units from 0 values, and reorder the properties. And if you want to automatically save the result of the compilation, you can use the following command:

recess path/to/css/file.css --compile > path/to/css/compiled-file.css


Keep in mind though that whenever you run this command, the results of the Recess compilation of the first css file will replace the contents of the second css file in the command.

I hope you find Recess helpful and a great addition to your frontend development process.

文章提交者:Danny