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

我是一个咕哝的大人物，但我只知道如何使用咕哝的concat和uglify。现在我需要一些css缩小、grunt复制和liveload以及其他任务的帮助

现在我需要为我的JS小部件构建一个UI系统，所以我正在考虑将变量添加到css文件中（在某种程度上类似于less），并将其编译（用real样式替换变量）为真正的css。但我不能少用，因为我的小部件总共是20k，少用对它来说太大了

我似乎需要使用grunt来做一些事情，比如mincss，我不知道如何将它编译成变量形式的js文件。我需要实时加载它和其他更多的tast，以使整个过程自动化

以下是我想做的：

style.css：

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

这是我想写在css文件中的东西，它实际上不是一个真正的css

首先缩小它（我不知道假css是否可以缩小？）：style.min.css

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

然后将其编译成css.js（只需添加一个“var css=”，这是暂停我的主要原因）：

我将在我的js中进行简单的RegExp替换，使之成为真正的css，一个简单的less.js。 我知道该怎么做

将特定文件widget.js复制到我的nginx静态文件文件夹中进行本地测试。（是否使用grunt复制？）

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

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

---

谢谢。

也许你可以结合使用

less

。自述文件：

这个任务可以做两件事；使用UCS分析html+css，打印出grunt日志中未使用的选择器，并使用这些信息创建新的clean

---

听起来像是要将CascadingStyleSheet转换为JavaScript，但这真的很奇怪。我想你的意思是别的。有没有其他方法可以在不使用LESS的情况下使用css和变量？有SASS，本质上与LESS相同。你为什么不能少用一点呢？你总是可以在你的现场站点上提供一个编译过的CSS。我的意思是一些没有那么大的东西。。。我提到，整个小部件只有20k，所以我必须通过自己做这件事来简化它。我相信LESS基本上是在做类似的事情。此外，变量的值加载到其他地方，在小部件加载配置文件之前，我没有完整的编译版本。所以我不能提前编译css。这听起来真的很奇怪。您的CSS是动态确定的吗？（比如，通过一些JavaScript？）。

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