如何使用grunt缩小css文件并将其编译为JS

我是一个咕噜咕噜，但我只是知道如何使用grunt concat和uglify。现在我需要一些关于css缩小，grunt复制和liveload以及其他任务的帮助。如何使用grunt缩小css文件并将其编译为JS

现在我需要为我的JS小部件构建一个UI系统，所以我正在考虑将变量添加到css文件中（如少一些）和编译（用实际样式替换变量）它变成真正的CSS。但我不能少用我的小部件，整体上是20k，LESS对它来说太大了。

我似乎需要使用grunt来做像mincss和i-dont-know这样的东西来将它编译成一个变量形状的js文件。而且我需要LiveLoad以及其他更多功能来自动完成整个过程。

这是我想做的事：

的style.css：

.a{ 
    width: $aWidth; 
    color: $aColor; 
}

这是我想在CSS文件，这是不是一个真正的CSS实际上写。

第一运行如下（我不知道是不是假的CSS可以精缩？）：style.min.css

.a{width: $aWidth;color: $aColor;}

然后将其编译成一个css.js（刚加入“变种CSS =”，这就是我停止大部分）：

var css = ".a{width: $aWidth;color: $aColor;}";

我会尽我的js简单正则表达式替换，使之真正的CSS，一个容易和简单less.js. CONCAT它，我知道该怎么办......

复制concated文件widget.js到本地测试我的nginx的静态文件的文件夹。（这种使用咕噜副本？）上面

自动运行所有这些任务当我保存/更改style.css文件（这使用watch？或liveload？也许我需要两组设置来观看css或js）时刷新页面。

这就是我所需要的，我相信这会对更多咕噜的初学者有所帮助。谢谢。

2013-10-10 zhangcx93

这听起来像是您试图将CascadingStyleSheet转换为JavaScript，但这真的很奇怪。我认为你的意思是别的。 – Halcyon

有没有其他方法可以在不使用LESS的情况下对变量使用css？ – zhangcx93

有SASS，它基本上与LESS相同。为什么不能准确使用LESS？您可以随时在您的现场网站上为已编译的CSS提供服务。 – Halcyon

也许你可以实际使用less结合grunt-ucss。自述文件：

该任务可以做两件事;使用ucss分析html + css并在grunt日志中打印出任何未使用的选择器，并使用该信息创建新的清理

2013-11-14 07:38:35

回答