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

【问题标题】：How to minify a css file with grunt and compile it into JS如何使用 grunt 缩小 css 文件并将其编译成 JS
【发布时间】：2013-10-10 16:41:01
【问题描述】：

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

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

我似乎需要使用 grunt 来做诸如 mincss 和 i-dont-know-what 之类的东西来将它编译成一个变量形状的 js 文件。而且我需要 LiveLoad 它和更多其他 tast 以使整个进度自动进行。

这是我想做的：

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复制？）

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

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

【问题讨论】：

听起来您正试图将 CascadingStyleSheet 转换为 JavaScript，但这真的很奇怪。我想你的意思是别的。
有没有其他方法可以在不使用LESS的情况下使用带有变量的css？
有SASS，本质上和LESS一样。为什么不能完全使用 LESS？您始终可以在您的实时网站上提供已编译的 CSS。
我的意思不是那么大...我提到整个小部件只有 20k，所以我必须自己做这件事来让它变得简单。我相信LESS基本上在做类似的事情。此外，变量的值是在其他地方加载的，在小部件加载配置文件之前，我没有完整的编译版本。所以无法提前编译css。
这对我来说听起来很奇怪。你的 CSS 是动态确定的吗？（比如，通过一些 JavaScript？）。

【解决方案1】：

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

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

【讨论】：