怎样在VPS上使用Recess

 

关于Recess

Twitter开发的代码质量工具Recess旨在帮助你通过执行指南更好地写代码。Recess建立在LESS之上，可以在开发过程中作为一个linter，让代码保持整洁和可维护性。

 

在这篇教程里，我们将在一个VPS上安装Recess，并运行Ubuntu 12.04，你需要提前搞定VPS，以及Node.js和NPM，如果还没有完成，可以查看这篇教程里的步骤，完成安装。

 

安装

Node和NPM装到虚拟服务器后，运行下面命令安装Recess：

 

npm install recess -g

 

 

现在来看些好玩的：使用Recess

现在你想怎样使用这个很酷的代码助手呢？首先，关于写css是有一些标准的。例如，不能过度限制选择器或给选择器使用#ids，Recess已经内置配置了一些rules，你可以通过css文件运行rules，并可以查看。

 

安装完Recess后，可以直接看到这些rules：

 

<!--[if !supportLists]-->·         noIDs -不要使用像#foo这样的ID样式

<!--[if !supportLists]-->·         <!--[endif]-->noJSPrefix – 不要给js-前缀类名加样式

<!--[if !supportLists]-->·         <!--[endif]-->noOverqualifying -不要过度限制选择器，如div#foo.bar

<!--[if !supportLists]-->·         <!--[endif]-->noUnderscores –给类命名时不要用下划线，如.my_class

<!--[if !supportLists]-->·         <!--[endif]-->noUniversalSelectors -不要使用通用选择器

<!--[if !supportLists]-->·         <!--[endif]-->zeroUnits -不要给0值加单位，如0px

<!--[if !supportLists]-->·         <!--[endif]-->strictPropertyOrder – 执行严格的属性顺序(这儿有定义的顺序)

 

 

现在对其进行测试，先创建一个简易的css文件，粘贴以下内容进去：

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

 

 

保存文件，退出，在终端运行下面的命令：

recess path/to/css/file.css

 

 

这个命令会查看你的文件，并报告问题。在我们的测试中，css文件违反了2个rule，所以Recess应该会标注出来。如果想检查一个文件夹里的所有css文件，运行下面的命令：

recess path/to/css/folder/*

 

 

这样会指向那个文件夹里的所有css文件。

 

 

 

现在因为一些原因，你想要给你的css使用#ids，并不被Recess检查到，可以运行以下命令：

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

 

 

有了这条命令，通过一个选项来设置那个特定的rule为false，甚至可以加更多：

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

 

 

这样就会显示测试文件是没有问题的，因为违反的rule并没有被标注出来。

 

 

但现在假设：我们不想每次都设置这些选项，而还要让Recess检查不到这些rules。你需要创建一个配置文件，名字叫做.recessrc。有2个地方可以放这个文件：

 

<!--[if !supportLists]-->·         <!--[endif]-->第一，可以把文件放到将要执行recess命令的文件夹里。这样的话，只需要在没有选项的情况下运行命令，而且配置文件会被获取。

<!--[if !supportLists]-->·         <!--[endif]-->第二，将它放到另一个文件夹而不是运行recess命令的文件夹。这样的话，你需要通过一个选项连接路径到配置文件。例如：

recess path/to/css/file.css --config=path/to/config/.recessrc

 

 

但文件里放什么东西呢？那要看你想要拿出哪些rule了。如果你想确认noIDs和noUnderscores没有在检查范围内，可以粘贴一下内容：

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

 

 

另一件很酷的事是：可以用Recess编译css（或LESS）文件，并为你做些自动更改。例如，如果你的属性排列顺序不够好，可以用Recess编译文件，然后在终端输出正确属性顺序的css文件。只需给命令加上—compile选项：

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

 

 

它并不能修复所有有问题的rules，但它会使空格符标准化，从零值开始去掉单位，并给属性重新排序。要是想自动保存编译结果，可以使用下面的命令：

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

 

 

还要记住的一点是：无论什么时候运行这条命令，Recess编译的第一个css文件结果都会替代命令中第二个css文件的内容。

 

最后，希望读者能感受到Recess带来的好处，以及给前端开发过程带来的巨大补充。

 

 

 

By Danny

 

From：https://www.digitalocean.com/community/articles/how-to-install-and-use-recess-on-a-vps