- mydemo.css
- animate.css
- normalize.css
- bootstrap.css
[sudo] npm install -g ckstyle
/* 示例 */ .test {-webkit-transition: 1s; -moz-transition: 1s; _width:10px; *color:#ffffff; padding:0; padding-top: 20px }
ckstyle format test.css
======>
/* 示例 */ .test { -webkit-transition: 1s; -moz-transition: 1s; _width: 10px; *color: #ffffff; padding: 0; padding-top: 20px; }
ckstyle fix test.css
======>
/* 示例 */ .test { _width: 10px; padding: 20px 0 0; *color: #FFF; -webkit-transition: 1s; -moz-transition: 1s; }
ckstyle compress test.css
======>
.test{_width:10px;padding:20px 0 0;*color:#FFF;-webkit-transition:1s;-moz-transition:1s}
ckstyle compress --browsers="ie6,ie7,ie,chrome,firefox,safari,opera" test.css
======>
firefox : .test{padding:20px 0 0;-moz-transition:1s} chrome : .test{padding:20px 0 0;-webkit-transition:1s} ie7 : .test{padding:20px 0 0;*color:#FFF} ie6 : .test{_width:10px;padding:20px 0 0;*color:#FFF} opera : .test{padding:20px 0 0} safari : .test{padding:20px 0 0;-webkit-transition:1s} ie : .test{_width:10px;padding:20px 0 0;*color:#FFF}
[sudo] npm install -g ckstyle-serve
),运行ckstyle serve
,在 4567
端口启动了ck服务,开始玩转 CKService 吧~ 有一个东西,能让你一次点击,检查任何网站的CSS。检查结果内容包括:
字符数、百分比
等)流量
实时替换和恢复
压缩后的CSS文件,查看压缩后对页面的影响代码Diff
CKService让您 0成本 的完成CSS代码的预压缩,而对线上实际代码不产生任何影响,轻松无压力的试用吧!
准备工作:
[sudo] npm install -g ckstyle
[sudo] npm install -g ckstyle-serve
ckstyle serve
开始玩!
Bookmarklet链接为:CKService
人人网
淘宝网
一淘网
优酷网
百度贴吧
目前,CKStyle的压缩率已经远远超过了YUICompressor
目前,CKStyle基本与clean-css压缩效果持平,甚至局部超越。
请通过在线编辑器进行测试,如果有不符合以上期望的结果,请在 这里 提bug,多谢。
前端,再也不需要安装各自独立的检查(CSSLint)、美化(CSSBeautifier/CSSComb)、修复(暂无)、压缩(YUICompressor/cssmin/clean-css)工具。
CKStyle,一个工具,即可包揽以上所有事情。
CSS的工具体系,从解析器开始,应该是一脉相承的,不应该互相隔离。
CKStyle的所有功能,都是基于插件的,规则的处理,是插件,命令行工具,还是插件。例如:
规则的插件,就像是流水线上的工人一样,每一个插件,负责一个职责,整体协作,完成一项产品。例如:
check
用于检查是不是有值相同的RuleSet,它的 fix
用于自动修复此问题check
用于检查0后面有没有可省略的单位,它的 fix
用于自动删除可省略的单位每一个工人,都是可以 随时调换
的,每一个插件,都可以 热插拔
。
require('ckstyle')
ckstyle compress in.css -o out.css
seajs.use('ckstyle')
运行环境,不是问题,立即试用,就看这里
基于Mocha的完备的单元测试,保驾护航
作为一个工具,单元测试必不可少,CKStyle基于Mocha,设计了一套适合自己特色的 测试用例组织方式。包括:
CKStyle是纯JS实现的CSS工具集。
目前,CKStyle在压缩率和压缩后代码的性能上,已经超过了YUICompressor
4年前,jQuery团队用UglifyJS 取代 了Google Closure Compiler
而现在,CSS压缩工具已经严重落后于专业前端开发者的实际要求
为了共建更好的CSS压缩工具,我们需要你,请 加入我们!