怎样在VPS上使用Recess


发布者 goyoo  发布时间 1399534091573
关键字 分享 


关于Recess

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

 

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

 

安装

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

npm install recess -g

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

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

 

安装完Recess后,可以直接看到这些rules:

·         noIDs -不要使用像#foo这样的ID样式

·         noJSPrefix – 不要给js-前缀类名加样式

·         noOverqualifying -不要过度限制选择器,如div#foo.bar

·         noUnderscores –给类命名时不要用下划线,如.my_class

·         noUniversalSelectors -不要使用通用选择器

·         zeroUnits -不要给0值加单位,如0px

·         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个地方可以放这个文件:

·         第一,可以把文件放到将要执行recess命令的文件夹里。这样的话,只需要在没有选项的情况下运行命令,而且配置文件会被获取。

·         第二,将它放到另一个文件夹而不是运行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









  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA