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

Question

我是一个笨蛋，但我只知道如何使用grunt concat和uglify。现在我需要一些css minification，grunt copy和liveload以及其他任务的帮助。

现在我需要为我的JS小部件构建一个UI系统，所以我正在考虑将变量添加到css文件中（比如在某些方面更少）并将其编译（用真实样式替换变量）到真正的css中。但我不能少用，因为我的小部件总体上是20k，LESS太大了。

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

这是我想要做的：

的style.css：

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

这是我想在css文件中写的，实际上并不是真正的css。

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

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

然后把它编译成一个css.js（只需添加一个“var css =”，这主要是让我停下来的）：

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

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

将已连接的文件widget.js复制到我的nginx静态文件文件夹中进行本地测试。（这使用grunt copy？）

自动运行上述所有这些任务并在保存/更改style.css文件时刷新页面（这使用watch？或liveload？并且我可能需要两组设置才能观看css或js）。

这就是我所需要的，而且我相信它会为更多笨拙的初学者提供帮助。 感谢。

Answer 1

也许您可以将less与grunt-ucss结合使用。来自自述文件：

  

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